avaScript 


动态 网 站 开发 
宗 例 课堂 


PP 


bi DB) 


/ 爷 本 书 案例 完整 源 代码 。 (8) 16 个 经 典 项 目 开发 完整 源码 

附 赠 教学 幻灯 片 0 PHP 网 站 开发 工程 师 面试 技巧 
大 量 资源 加 本 书 精品 教学 视频 全 PHP 网 站 开发 工程 师 常见 面试 题 
(0 常用 SQL 语句 速 查 手册 。 (0) Web 前 端 工程 师 常见 面试 题 

@ PHP 常 用 函数 速 查 手册 


青 华 大 学 出 版 社 


网 站 开发 案例 课堂 


JavaScript 动态 网 站 开发 案例 课堂 


刘 玉 红 浦 娟 编著 


清华 大 学 出 版 社 


北京 


内 容 简 介 


本 书 以 零 基础 讲解 为 宗旨 ， 用 实例 引导 读者 深入 学 习 ， 采 取 JavaScript 基础 知识 一 JavaScript 核心 技术 一 
JavaScript 高 级 应 用 一 网 页 特效 应 用 案例 的 讲解 模式 ， 深 入 浅 出 地 讲解 了 JavaScript 动态 网 页 设计 和 开发 动态 
网 站 的 各 项 技术 及 实战 技能 。 

本 书 适合 任何 想 学 习 JavaScript 动态 网 页 设计 的 人 员 ， 无 论 您 是 否 从 事 计算 机 相关 行业 ， 无 论 您 是 否 接触 
过 JavaScript 动态 网 页 设计 ， 通 过 学 习 本 书 内 容 均 可 快速 掌握 JavaScript 动态 网 页 设计 和 开发 动态 网 站 的 方法 
和 技巧 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 (CIP) 数 据 


JavaScript 动态 网 站 开发 案例 课堂 / 刘 玉 红 ， 蒲 娟 编著 . 一 北京 : 清华 大 学 出 版 社 ，2016 

(网 站 开发 案例 课堂 ) 

ISBN 978-7-302-43830-4 

I. @J… II[. @ 刘 … @ 蒲 … 了 H. @ 网 页 制作 工具 一 JAVA 语言 一 程序 设计 I. DTP393.092 


中 国 版 本 图 书馆 CIP 数据 核 字 (2016) 第 101720 号 


责任 编辑 : 张 总 青 
装帧 设计 : 杨 玉兰 
责任 校对 : 文 瑞 英 


出 版 发 行 : 清华 大 学 出 版 社 
网 址 : http://www.tup.com.cn., http://www.wqbook.com 
地 址 : 北京 清华 大 学 学 研 大 厦 A 座 邮 ” 编 : 100084 
社 总 机 : 010-62770175 邮 ” 购 : 010-62786544 
投稿 与 读者 服务 : 010-62776969. c-service@tup .tsinghua.edu.cn 
质量 反馈 : 010-62772015. zhiliang@tup.tsinghua.edu.cn 
印刷 者: 
装订 者 : 
全 国 新 华 书店 
190mm X260mm 印 张 : 32.25 字 数 : 782 千 字 
( 附 DVD 1 张 ) 
: 2016 年 7 月 第 1 版 印 次 : 2016 年 7 月 第 1 次 印刷 
: 1~3000 
: 69.00 元 


了 
计划 


装 台 亚 
他 炎 党 


产品 编号 : 066571-01 


lf 


前 


“网 站 开发 案例 课堂 ”系列 图 书 是 专门 为 网 站 开发 和 数据 库 初学 者 量 身 定做 的 一 套 学 习 
用 书 ， 由 IT 应 用 实 训 中 心 的 高 级 讲师 编著 ， 整 套 书 涵盖 网 站 开发 、 数 据 库 设计 等 方面 。 整 套 
书 具 有 以 下 特点 。 


@ 前 沿 科技 

无 论 是 网 站 建设 、 数 据 库 设计 还 是 HTML5、CSS3， 精 选 的 是 较为 前 沿 或 者 用 户 群 最 多 
的 领域 ， 帮 助 大 家 认识 和 了 解 最 新 动态 。 

”权威 的 作者 团队 


组 织 国家 重点 实验 室 和 资深 应 用 专家 联手 编著 该 套图 书 ， 融 合 了 丰富 的 教学 经 验 与 优秀 
的 管理 理念 。 


于 学习 型 案例 设计 

以 技术 的 实际 应 用 过 程 为 主线 ， 全 程 采用 图 解 和 多 媒体 同步 结合 的 教学 方式 ， 生 动 、 直 
观 、 全 面 地 剖析 使 用 过 程 中 的 各 种 应 用 技能 ， 降 低 难 度 ， 提 升学 习 效率 。 
为 什么 要 写 这 样 一 本 书 


随 着 网 络 的 发 展 ， 很 多 企 事业 单位 和 广大 网 民 对 于 建立 网 站 的 需求 越 来 越 强 烈 ， 另 外 对 
于 大 中 专 院 校 ， 很 多 学 生 需 要 做 毕业 设计 ， 但 是 这 些 读 者 既 不 懂 网 页 代码 程序 ， 又 不 知道 从 
哪里 下 手 。 为 此 ， 本 书 针对 这 样 的 零 基础 读者 ， 全 面 带 领 读者 学 习 JavaScript 的 相关 知识 ， 读 
者 在 学 习 JavaScript 中 遇 到 的 技术 ， 本 书 基本 上 都 有 详细 讲解 。 通 过 本 书 的 实 训 ， 读 者 可 以 很 
快 地 进行 JavaScript 动态 网 页 的 设计 ， 提 高 职业 化 能 力 ， 从 而 解决 公司 实际 需求 问题 。 


本 书 特 色 


于 零 基础 、 入 门 级 的 讲解 

无 论 您 是 否 从 事 计 算 机 相关 行业 ， 无 论 您 是 否 接触 过 JavaScript 动态 网 页 设计 和 动态 网 站 
开发 ， 都 能 从 本 书 中 找到 最 佳 起 点 。 

@ 实用、 专业 的 范例 和 项 目 

本 书 在 编排 上 紧密 结合 深入 学 习 JavaScript 动态 网 页 设计 和 开发 动态 网 站 技术 的 过 程 ， 
JavaScript 基本 操作 开始 ， 逐 步 带领 读者 学 习 JavaScript 的 各 种 应 用 技巧 ， 侧 重 实战 技能 ， 
用 简单 易 懂 的 实际 案例 进行 分 析 和 操作 指导 ， 让 读者 学 起 来 简明 轻松 ， 操 作 起 来 有 章 可 循 。 


福王 


人 。” JavaScript 动态 网 站 开发 
人 


有 资深 实战 型 讲师 答疑 。 
本 书 学 习 最 佳 途径 


”随时 检测 自己 的 学 习 成 果 


每 章 首页 中 均 提供 了 学 习 目 标 ， 可 指导 读者 重点 学 习 及 学 后 检查 。 


每 章 最 后 的 “ 跟 我 练 练 手 ”板块 均 根据 该 章 内 容 精 选 而 成 ， 读 者 可 以 随时 检测 自己 的 学 
习 成 果 和 实战 能 力 ， 做 到 融会 贯通 。 


和 ”细致 入 微 、 贴 心 提示 

本 书 在 讲解 过 程 中 ， 在 各 章 中 使 用 了 “注意 ”、“ 提 示 ”、“ 技 巧 ”等 小 栏目 ， 使 读者 
在 学 习 过 程 中 能 更 清楚 地 了 解 相 关 操 作 、 理 解 相关 概念 ， 并 轻松 掌握 各 种 操作 技巧 。 

”专业 创作 团队 和 技术 支持 


本 书 由 IT 应 用 实 训 中 心 编著 和 提供 技术 支持 。 
您 在 学 习 过 程 中 遇 到 任何 问题 ， 可 加 入 智慧 学 习 乐 园 QQ 群 : 221376441 进行 提问 ， 随 时 


本 书 以 学 习 JavaScript 动态 网 页 开发 的 最 佳 制作 流程 来 分 配 章节 ， 从 最 初 的 JavaScript 基 
本 操作 开始 ， 讲 解 了 JavaScript 核心 技术 、JavaScript 的 高 级 应 用 等 ， 最 后 结合 HTML、CSS 
的 相关 知识 讲解 各 种 经 典 的 动态 网 页 特效 的 制作 方法 。 大 致 内 容 分 配 如 下 图 所 示 。 


第 1 篇 ”基础 知识 


第 2 篇 ”核心 技术 


第 3 篇 ”高 级 应 用 


第 4 篇 ”网 页 动态 特效 


超 值 光盘 
全程 同步 录像 教学 


必须 了 解 的 | Javascript| | 控制 洁 构 Hl” SF 
JarascriptAoia| “编程 基础 ”| | 与 名 “| | 的 “||” 当 3 组 一 | 时 
vs 的 亩 | 。 |[ 勤 信 与 雪 学 
试 5 优化 |< 一 | 对象 ” 


ET ed ee re 过 


JavaScript css 样 式 
文档 属性 | | 文档 方法 | 位 档 对 象 的 应 用 | 。 
re 


远 反 器 [动画 效果 | | 插件 和 事件 


一 一 ”| 文字 特效 -| 图 片 特效 上 De 鼠标 特效 | | 时 间 特效 | 页 面 特效 


本 书 所 配 光 盘 内 容 涵 盖 了 书 中 所 有 的 知识 点 ， 详 细 讲解 了 每 个 实例 的 制作 过 程 和 技术 
点 ， 比 看 书 更 轻松 、 收 获 更 多 。 


全 1 


mm 王牌 资源 大 放送 
赠送 大 量 王牌 资源 ， 包 括 本 书 实例 源 文件 、 教 学 幻灯 片 、 本 书 精品 教学 视频 、JavaScript 


函数 速 查 手册 、 精 选 的 JavaScript 实例 、jQuery 选择 器 和 事件 速 查 手册 、HTML 标签 速 查 
表 、 网 页 样式 与 布局 案例 赏析 、 精 彩 网 站 配色 方案 赏析 、CSS+DIV 布局 赏析 案例 。 


读者 对 象 


没有 任何 JavaScript 动态 网 页 开发 基础 的 初学 者 。 

有 一 定 的 JavaScript 动态 网 页 开发 和 基础 ， 想 精通 网 站 开发 的 人 员 。 
有 一 定 的 动态 网 站 开发 基础 ， 没 有 项 目 经 验 的 人 员 。 

正在 进行 毕业 设计 的 学 生 。 

大 专 院 校 及 培训 学 校 的 老师 和 学 生 。 


创作 团队 


本 书 由 刘 玉 红 策划 ，IT 应 用 实 训 中 心 高 级 组 织 编写 ， 参 加 编写 的 人 员 有 蒲 娟 、 付 红 、 李 
园 、 王 攀登 、 郭 广 新 、 侯 了 永 岗 、 刘 海松 、 孙 若 淞 、 王 月 娇 、 包 慧 利 、 陈 伟 光 、 胡 同 夫 、 梁 云 
梁 和 周 浩 浩 。 

在 编写 过 程 中 ， 我 们 虽 竭尽 所 能 将 最 好 的 讲解 呈现 给 了 读者 ， 但 难免 有 朴 漏 和 不 妥 之 
处 ， 敬 请 读者 不 音 指 正 。 若 您 在 学 习 中 遇 到 困难 或 疑问 ， 或 有 任何 建议 ， 可 写 信 发 送 至 邮箱 
357975357@qq.com。 
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JavaScript 动 态 网 站 开发 
案例 课堂 由 一 


1.1 认识 JavaScript 


JavaScript 作为 一 种 增强 网 页 交互 功能 的 脚本 语言 ， 拥 有 近 二 十 年 的 发 展 历史 。 它 简单 、 
易学 、 易 用 的 特性 ， 使 其 立 于 不 败 之 地 。 


1.1.1 什么 是 JavaScript 


JavaScript 最 初 由 网 景 公 司 的 Brendan Eich 设计 ， 是 一 种 动态 、 弱 类 型 、 基 于 原型 的 语 
言 ， 内 置 支持 类 。 经 过 近 二 十 年 的 发 展 ， 它 已 成 为 健壮 的 基于 对 象 和 事件 驱动 并 具有 相对 安 
全 性 的 客户 端 脚本 语言 。 同 时 ，JavaScript 也 是 一 种 广泛 用 于 客户 端 Web 开发 的 脚本 语言 ， 常 
用 来 给 HTML 网 页 添加 动态 功能 ， 比 如 响应 用 户 的 各 种 操作 等 。 

JavaScript 可 弥补 HTML 语言 的 缺陷 ， 实 现 Web 页 面 客 户 端的 动态 效果 ， 其 主要 作用 
如 下 。 

(1) 动态 改变 网 页 内 容 。 

HTML 语言 是 静态 的 ， 一 旦 编写 ， 内 容 是 无 法 改变 的 。JavaScript 则 能 弥补 这 种 不 足 ， 可 
以 将 内 容 动 态 地 显示 在 网 页 中 。 

(2) 动态 改变 网 页 的 外 观 。 

JavaScript 通过 修改 网 页 元 素 的 CSS 样式 ， 达 到 动态 地 改变 网 页 外 观 的 目的 。 例 如 ， 修 改 
文本 的 颜色 、 大 小 等 属性 ， 以 及 图 片 的 动态 效果 等 。 

(3) 验证 表单 数据 。 

为 了 提高 网 页 的 效率 ， 用 户 在 填写 表单 时 ， 可 以 在 客户 端 对 数据 进行 合法 性 验证 ， 验 证 
成 功 之 后 才能 提交 到 服务 器 上 ， 进 而 减少 服务 器 的 负担 和 网 络 带宽 的 压力 。 

(4) 响应 事件 。 

JavaScript 是 基于 事件 的 语言 ， 因 此 可 以 影响 用 户 或 浏览 器 产生 的 事件 。 只 有 事件 产生 时 
才 会 执行 某 段 JavaScript 代码 ， 例 如 只 有 当 用 户 在 单 击 程序 按钮 时 ， 程 序 才 显 示 运 行 结果 。 


Sn 几乎 所 有 浏览 器 都 支持 JavaScript， 例 如 Internet Explorer(IE)、Firefox、 
六 ”Netscape、Mozilla、Opera 等 。 


1.1.2 JavaScript 的 特点 


JavaScript 的 特点 主要 有 以 下 几 个 方面 。 

(1) 语法 简单 ， 易 学 易 用 。 

JavaScript 语法 简单 、 结 构 松 散 ， 可 以 使 用 任何 一 种 文本 编辑 器 进行 编写 。 用 JavaScript 
编写 的 程序 在 运行 时 不 需要 编译 成 二 进 制 代 码 ， 只 需要 支持 JavaScript 的 浏览 器 能 够 对 其 进 
行 解释 即 可 。 

(2) 解释 性 语言 。 

非 脚本 语言 编写 的 程序 通常 需要 经 过 编写 一 编译 一 链接 一 运行 4 个 步骤 ， 而 脚本 语言 


JavaScript 只 需要 经 过 编写 一 运行 2 个 步骤 。 

(3) 跨 平台 。 

由 于 JavaScript 程序 的 运行 依赖 于 浏览 器 ， 只 要 操作 系统 中 安装 有 支持 JavaScript 的 浏览 
器 即 可 ， 因 此 JavaScript 与 平台 (例如 ，Windows 操作 系统 、UNIX 操作 系统 、Linux 操作 系 
统 、Android 操作 系统 、iPhone 操作 系统 等 ) 无 关 。 

(4) 基于 对 象 和 事件 驱动 。 

JavaScript 把 HTML 页 面 中 的 每 个 元 素 都 当 作 一 个 对 象 来 处 理 ， 并 且 这 些 对 象 都 具有 层次 
关系 ， 像 一 棵 倒立 的 树 ， 这 种 关系 被 称 为 “文档 对 象 模型 (DOM)”。 在 编写 JavaScript 代码 时 
会 接触 到 大 量 对 象 及 对 象 的 方法 和 属性 。 可 以 说 学 习 JavaScript 的 过 程 ， 就 是 了 解 JavaScript 
对 象 及 其 方法 和 属性 的 过 程 。 因 为 基于 事件 驱动 ， 所 以 JavaScript 可 以 捕捉 到 用 户 在 浏览 器 中 
的 操作 ， 可 以 将 原来 静态 的 HTML 页 面 变 成 能 跟 用 户 交互 的 动态 页 面 。 

(5) 用 于 客户 端 。 

尽管 JavaScript 分 为 服务 器 端 和 客户 端 两 种 ， 但 目前 应 用 最 多 的 还 是 客户 端 。 


1.1.3 JavaScript 与 Java 的 区 别 


JavaScript 是 一 种 嵌入 式 脚本 文件 ， 直 接 插 入 网 页 ， 由 浏览 器 一 边 解 释 一边 执 行 ， 而 Java 
语言 必须 在 Java 虚拟 机 上 运行 ， 且 事先 需要 进行 编译 。 另 外 ，Java 的 语法 规则 要 比 JavaScript 
严格 得 多 ， 功 能 也 比 JavaScript 强大 得 多 。 具 体 来 讲 ，JavaScript 与 Java 的 主要 区 别 如 下 。 


1. 基于 对 象 和 面向 对 象 


JavaSeript 是 一 种 基于 对 象 的 脚本 语言 ， 是 一 种 基于 对 象 和 事件 驱动 的 编程 语言 ， 因 而 它 
本 身 提供 了 非常 丰富 的 内 部 对 象 供 设计 人 员 使 用 。 

Java 是 面向 对 象 的 ， 即 Java 是 一 种 真正 的 面向 对 象 的 语言 ， 即 使 是 开发 简单 的 程序 也 必 
须 设计 对 象 。 

2. 强 变量 和 弹 变量 


JavaScript 与 Java 所 采取 的 变量 是 不 一 样 的 。JavaScript 中 的 变量 声明 采用 弱 类 型 ， 即 变 
量 在 使 用 前 不 需 作 声明 ， 而 是 解释 器 在 运行 时 检查 其 数据 类 型 。 
Java 采用 强 类 型 变量 检查 ， 即 所 有 变量 在 编译 之 前 必须 作 声明 。 例 如 下 面 这 段 代码 : 


Integer x 

string y 

X=1234567 

y=654321; 

其 中 “x=123456;”， 说 明 是 一 个 整数 ，“y=654321;”， 说 明 是 一 个 字符 串 。 而 在 
JavaScript 中 变量 声明 则 采用 弱 类 型 ， 即 变量 在 使 用 前 不 需要 作 声 明 ， 而 是 解释 器 在 运行 时 检 
查 其 数据 类 型 。 例 如 以 下 代码 : 


X=1234567 
y="654321"; 
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在 上 述 代码 中 ， 前 者 说 明 x 为 数据 型 变量 ， 而 后 者 说 明 y 为 字符 型 变量 。 
3. 代码 格式 不 同 


JavaScript 与 Java 代码 格式 不 一 样 。JavaScript 的 代码 是 一 种 文本 字符 格式 ， 可 以 直接 嵌 
入 HTML 文档 ， 并 且 可 动态 装载 。 编 写 HTML 文档 就 像 编 辑 文本 文件 一 样 方便 ， 其 独立 文件 
的 格式 为 *js。 

Java 是 一 种 与 HTML 无 关 的 格式 ， 必 须 通过 像 HTML 中 引用 外 媒体 那样 进行 装载 ， 其 代 
码 以 字 节 代码 的 形式 保存 在 独立 的 文档 中 ， 其 独立 文件 的 格式 为 *.class。 


4. 诺 入 方式 不 同 

JavaScript 与 Java 的 嵌入 方式 不 一 样 。 在 HTML 文档 中 ， 两 种 编程 语言 的 标识 不 同 ， 
JavaScript 使 用 “<Script>.… </Script>” 格 式 来 标识 ， 而 Java 使 用 “<applet>...</applet>” 格 式 
标识 。 

5. 静态 联 编 和 动态 联 编 

JavaScript 采用 动态 联 编 ， 即 JavaScript 的 对 象 引 用 在 运行 时 进行 检查 。 

Java 采用 静态 联 编 ， 即 Java 的 对 象 引用 必须 在 编译 时 进行 ， 以 使 编译 器 能 够 实现 强 类 型 
检查 。 

6. 浏览 器 执行 方式 不 同 

JavaScript 与 Java 在 浏览 器 中 的 执行 方式 不 一 样 。JavaScript 是 一 种 解释 性 编程 语言 ， 其 
源 代码 在 发 往 客 户 端 执行 之 前 无 需 编译 ， 只 将 文本 格式 的 字符 代码 发 送 给 客户 即 可 ， 也 就 是 
说 JavaScript 语句 本 身 在 随 Web 页 面 一 起 下 载 下 来 时 ， 由 浏览 器 解释 执行 。 

而 Java 的 源 代码 在 传递 到 客户 端 执行 之 前 ， 必 须 经 过 编译 ， 因 而 在 传递 Java 源 代码 的 客 
户 端 上 必须 具有 相应 平台 上 的 仿真 器 或 解释 器 才能 实现 独立 于 某 个 特定 平台 的 代码 编译 。 


1.1.4 ” JavaScript 版 本 


1995 年 Netscape 公司 开发 的 名 字 为 LiveScript 的 语言 在 与 Sun 公司 合作 之 后 ， 于 1996 年 
更 名 为 JavaScript， 版 本 为 1.0。 随 着 网 络 技术 的 不 断 发 展 ，JavaScript 的 功能 越 来 越 强 大 与 完 
善 ， 至 今 已 诞生 了 多 个 版 本 ， 各 版 本 新 增 的 主要 功能 如 表 1-1 所 示 。 


表 1-1 JavaScript 各 版 本 新 增 的 主要 功能 


版 本 新 增 主要 功能 
1.0 目前 基本 不 被 使 用 
1.1 | 修正 了 1.0 中 的 部 分 错误 ， 并 加 入 了 对 数组 的 支持 
12 | 加 入 了 对 switch 选择 语句 和 正则 表达 的 支持 
13 | 修正 了 Javascript 1.2 与 ECMA1.0 中 不 兼容 的 部 分 
1.4 加 入 了 服务 器 端 功能 
1.5 在 JavaScript 1.3 的 基础 上 增加 了 异常 处 理 程序 ， 并 与 ECMA3.0 完全 兼容 


六 加 


版 本 新 增 主要 功能 
1.6 加 入 了 对 E4X、 字 符 串 泛 型 的 支持 以 及 新 的 数组 、 数 据 方法 等 新 特性 


| 在 JavaScript 1.6 的 基础 上 加 入 了 生成 器 、 声 明 器 、 分 配 符 变化 、let 表达 式 等 新 特性 
1.8 更 新 很 小 ， 它 确实 包含 了 一 些 向 ECMAScript 4/JavaScript 2 进化 的 痕迹 


该 版 本 只 有 很 少 的 更 新 ， 主 要 集中 在 添加 实时 编译 跟踪 


JavaScript 尽管 版 本 很 多 ， 但 是 受 限 于 浏览 器 ， 并 不 是 所 有 浏览 器 都 支持 JavaScript 的 各 
种 版 本 。 目 前 支持 JavaScript 版 本 的 常用 浏览 器 及 支持 情况 如 表 1-2 所 示 。 


表 1-2 支持 JavaScript 的 浏览 器 及 其 情况 


浏览 器 对 JavaScript 的 支持 情况 


Internet Explorer 9 支持 JavaScript 1.1 一 JavaScript 1.3 


Firefox 4.3 支持 JavaScript 1.1 一 JavaScript 1.8 


支持 JavaScript 1.1 一 JavaScript 1.5 


GZ 


1.2 JavaScript 的 编写 工具 
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JavaScript 是 一 种 以 文本 形式 存在 的 脚本 语言 ， 代 码 不 需要 编译 成 二 进 制 ， 因 此 任何 文本 
编辑 器 都 可 以 作为 其 开发 工具 。 通 常 使 用 的 JavaScript 编辑 器 有 记事 本 、Ultra Edit-32 和 


Dreamweaver。 


1.2.1 案例 一 一 使 用 记事 本 编写 JavaScript 


记事 本 是 Windows 系统 自 带 的 ， 也 是 最 简洁 方便 的 文本 编辑 器 。 由 于 记事 本 的 功能 过 于 
单一 ， 所 以 要 求 开发 者 必须 熟练 掌握 JavaScript 语言 的 语法 、 对 象 、 方 法 和 属性 等 内 容 。 对 于 
初学 者 来 说 ， 使 用 记事 本 编写 JavaScript 是 个 极 大 的 挑战 ， 因 此 ， 不 建议 初学 者 使 用 记事 本 编 
写 。 但 由 于 记事 本 简单 方便 、 打 开 速 度 快 ， 常 被 用 来 做 局 部 修改 的 工具 ， 所 以 下 面 还 是 简单 
介绍 一 下 使 用 记事 本 编写 JavaScript。 如 图 1-1 所 示 为 记事 本 窗口 。 


Fe SR EI0) eV emt 


EE 


1-1 记事 本 窗口 


在 记事 本 中 编写 JavaScript 程序 的 方法 很 简单 ， 只 需 打 开 记事 本 文件 ， 在 窗口 中 输入 相关 
JavaScript 代码 即 可 。 
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【 例 1.1】 (实例 文件 ，ch01\1.1.htmD) 在 记事 本 中 编写 JavaScript 的 脚本 。 
打开 记事 本 文件 ， 在 窗口 中 输入 以 下 代码 : 


<html> 

<body> 

<script type="text/javascript"> 
document .write ("Hello Javascript!") 
</script> 

</body> 

</html> 


将 记事 本 文件 保存 为 .html 格式 的 文件 ， 然 后 再 使 用 下 浏览 器 打开 该 文件 即 可 看 到 上 述 
代码 的 运行 效果 ， 如 图 1-2 所 示 。 
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Hello Javascript! 
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ES 图 1-2 运行 效果 
1.2.2 ”案例 一 一 使 用 Dreamweaver 编写 JavaScript 


Adobe Dreamweaver CS6 是 一 款 集 网 页 制作 和 管理 网 站 于 一 身 的 所 见 即 所 得 的 网 页 编辑 
器 ， 用 户 不 需要 编写 复杂 的 代码 ， 利 用 它 可 以 轻而易举 地 制作 出 跨越 平台 限制 和 浏览 器 限制 
的 充满 动感 的 网 页 。 

Dreamweaver 作为 一 款 优秀 的 可 视 化 网 页 制作 工具 ， 其 工作 界面 继承 了 原版 本 的 一 贯 风 
格 ， 有 方便 编辑 的 窗口 环境 ， 易 于 辨别 的 工具 列表 ， 无 论 在 使 用 什么 功能 时 出 现 的 问题 ， 都 
可 以 找到 解决 的 信息 ， 非 常 便于 初学 者 使 用 。Dreamweaver CS6 的 工作 界面 如 图 1-3 所 示 。 
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1-3 ”Dreamweaver CS6 的 工作 界面 


除了 上 述 编辑 器 外 ， 还 有 很 多 种 编辑 器 可 以 用 来 编写 JavaScript 程序 。 例 如 
Aptana、 lst JavaScript Editor、 JavaScript Menu Master、 Platypus JavaScript Editor、 
SurfMap JavaScript、JavaScript Editor 等 。“ 工 欲 善 其 事 ， 必 先 利 其 器 ”， 选 择 一 
款 适 合 自己 的 JavaScript 编辑 器 ， 可 以 让 程序 员 的 编写 工作 事半功倍 。 


1.3” JavaScript 在 HTML 中 的 使 用 


创建 好 JavaScript 脚本 后 ， 就 可 以 在 HTML 中 使 用 JavaScript 脚本 了 。 把 JavaScript 嵌入 
HTML 中 的 形式 有 多 种 : 在 HTML 网 页 头 中 嵌入 、 在 HTML 网 页 中 嵌入 、 在 HTML 网 页 的 
元 素 事件 中 嵌入 、 在 HTML 中 调用 已 经 存在 的 JavaScript 文件 等 。 


1.3.1 案例 一 一 在 HTML 网 页 头 中 嵌入 JavaScript 代码 


如 果 不 是 通过 JavaScript 脚本 生成 HTML 网 页 的 内 容 ，JavaScript 脚本 一 般 被 嵌入 在 
HTML 网 页 头 部 的 <head> 与 </head> 标 签 对 之 间 。 这 样 JavaScript 就 不 会 影响 整个 网 页 的 显示 
结果 。 

在 HIML 网 页 头 部 的 <head> 与 </head> 标 签 对 之 间 嵌 入 JavaScript 的 格式 如 下 : 


<html> 

<head> 

<title> 在 HTML 网 页 头 中 嵌入 Javascript 代码 <title> 
<script language="Javascript " > 

二 一 


人 脚本 内 容 


[人 
</script> 
</head> 
<body> 
</body> 
</html> 


在 <script> 与 </script> 标 签 对 中 添加 相应 的 JavaScript 脚本 后 ， 可 直接 在 HTML 文件 中 调 
用 JavaScript 代码 ， 实 现 相 应 的 效果 。 
【 例 1.2】 (实例 文件 ，ch01\1.2.htmD) 在 HTML 网 页 头 中 嵌入 JavaScript 代码 。 


<html> 
<head> 
<script language = "javascript"> 
document .write ("欢迎 来 到 javascript 动态 世界 ") ; 
</script> 
</head> 
<body> 
<p> 学 习 javascript! ! ! 
</body> 
</html> 
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该 实例 功能 是 在 HIML 文档 里 输出 一 个 字符 串 ， 即 “欢迎 来 到 JavaScript 动态 世界 。 运 
行程 序 ， 在 正 浏览 器 中 的 显示 效果 如 图 1-4 所 示 ， 可 以 看 到 网 页 中 显示 了 两 句 话 ， 其 中 第 一 
句 就 是 JavaScript 中 输出 的 语句 。 
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1-4 在 HTML 网 页 头 中 嵌入 JavaScript 代码 


在 JavaScript 的 语法 中 ， 分 号 ( ; ) 是 JavaScript 程序 作为 一 个 语句 结束 的 标 
识 符 。 


1.3.2 ”案例 一 一 在 HTML 网 页 中 藤 入 JavaScript 代码 


当 需 要 使 用 JavaScript 脚本 生成 HTML 网 页 内 容 时 (例如 某 些 JavaScript 实现 的 动态 树 )， 
就 需要 把 JavaScript 嵌入 在 HTML 网 页 主题 部 分 的 <body> 与 </body> 标 签 对 中 。 
具体 的 代码 格式 如 下 : 


<html> 

<head> 

<title> 在 HTML 网 页 中 嵌入 davaScript 代码 <title> 
</head> 

<body> 

<script language="JavaSscript " > 

<¥== 


= 
了 提示 


Javascript 脚本 内 容 


Wi 
</script> 
</body> 
</html> 


另外 ，JavaScript 代码 可 以 在 同一 个 HTML 网 页 的 头 部 与 主题 部 分 同时 嵌入 ， 并 且 在 同一 


个 网 页 中 可 以 多 次 嵌入 JavaScript 代码 。 
【 例 1.3】 (实例 文件 ，ch01\1.3.htmD) 在 HTML 网 页 中 嵌入 JavaScript 代码 。 


<html> 
<head> 
</head> 
<body> 
<p> 学 习 Javascript! ! ! </p> 


站 这 


<script language = "javascript"> 
document .write ("欢迎 来 到 Javascript 动态 世界 ") ; 
</script> 
</body> 
</html> 
该 实例 的 功能 是 在 HTML 文档 里 输出 一 个 字符 串 ， 即 “欢迎 来 到 JavaScript 动态 世 
界 ”。 运 行程 序 ， 在 下 9.0 浏览 器 中 的 显示 效果 如 图 1-5 所 示 ， 可 以 看 到 网 页 中 显示 了 两 句 
话 ， 其 中 第 二 句 就 是 JavaScript 中 输出 的 语句 。 
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1-5 在 HTML 网 页 中 典 入 JavaScript 代码 


1.3.3 ”案例 一 一 在 HTML 网 页 的 元 素 事件 中 骨 入 JavaScript 代码 


在 开发 Web 应 用 程序 的 过 程 中 ， 开 发 者 可 以 给 HTML 文档 设置 不 同 的 事件 处 理 器 ， 一 般 
是 设置 某 HTML 元 素 的 属性 来 引用 一 个 脚本 。 这 样 ， 当 需要 对 HTML 网 页 中 的 该 元 素 进行 事 
件 处 理 时 (验证 用 户 输入 的 值 是 否 有 效 )， 如 果 事 件 处 理 的 JavaScript 代码 量 较 少 ， 就 可 以 直接 
在 对 应 的 HTML 网 页 的 元 素 事件 中 嵌入 JavaScript 代码 。 
【 例 1.4】 (实例 文件 ，ch01\1.4.htmD) 在 HTML 网 页 的 元 素 事件 中 媒 入 JavaScript 代码 。 


<html> 
<head> 
<title> 判 断 文本 框 是 否 为 空 </title> 
<script language="JavaSscript"> 
function validate() 
{ 
Var txtNameObj = document.all.txtName; 
var txtNameValue = txtNameObj.value; 
if((_ txtNameValue == null) || (_ txtNameValue.length < 1) 
上 
window.alert ("文本 框 内 容 为 空 ， 请 输入 内 容 ") ; 
txtNameObj .focus (); 
return; 
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} 
F 
</script> 
</head> 
<body> 
<form method=post action="#"> 
<input type="text" name="txtName"> 


JavaScript 动 态 网 站 开发 
案例 课 膏 >… 


<input type="button™ value=" 确 定 " onclick="validate()"> 

</form> 

</body> 

</html> 

在 上 面 的 HTML 文档 中 使 用 JavaScript 脚本 ， 其 作用 是 当 文本 框 失去 焦点 时 ， 就 会 对 文 
本 框 的 值 进 行 长 度 检验 ， 如 果 值 为 空 ， 则 弹出 “文本 框 内 容 为 空 ， 请 输入 内 容 ” 的 提示 信 
息 。 上 面 的 HTML 文档 在 正 9.0 浏览 器 中 的 显示 结果 如 图 1-6 所 示 。 直 接 单 击 其 中 的 【 确 
定 】 按 钮 ， 即 可 看 到 相应 的 提示 信息 ， 如 图 1-7 所 示 。 
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图 1-6 显示 结果 图 1-7 提示 对 话 框 


1.3.4 ”案例 一 一 在 HTML 中 调用 已 经 存在 的 JavaScript 文件 


如 果 JavaScript 的 内 容 较 长 ， 或 者 在 多 个 HTML 网 页 中 都 调用 相同 的 JavaScript 程 
序 ， 可 以 将 较 长 的 JavaScript 或 者 通用 的 JavaScript 写成 独立 的 .js 文件 ， 直 接 在 HTML 网 
页 中 调用 。 

【 例 1.5】 (实例 文件 ，ch01\1.5.htmD) 在 HTML 中 调用 已 经 存在 的 JavaScript 文件 。 

<html> 

<head> 

<title> 使 用 外 部 文件 </title> 

<script src = "hello.js"></script> 

</head> 

<body> 

<p> 此 处 引用 了 一 个 javascript 文件 

</body> 

</html> 


上 述 HTML 文件 便 是 使 用 JavaScript 脚本 来 调用 外 部 JavaScript 的 文件 。 在 正 9.0 浏览 器 


中 的 显示 效果 如 图 1-8 所 示 ， 可 以 看 到 网 页 弹出 了 一 个 对 话 框 。 单 击 【确定 】 按 钮 后 ， 会 显 
示 网 页 内 容 。 
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1-8 导入 JavaScript 文 件 


由 此 可 见 ， 通 过 这 种 外 部 引用 JavaScript 文件 的 方式 ， 也 可 以 实现 相应 的 功能 ， 这 种 功能 
具有 以 下 两 个 优点 。 
e ”将 脚本 程序 同 现 有 页 面 的 逻辑 结构 及 浏览 器 结果 分 离 。 通 过 外 部 脚本 ， 可 以 轻易 实 
现 多 个 页 面 完成 同一 功能 的 脚本 文件 ， 可 以 很 方便 地 通过 更 新 一 个 脚本 内 容 实现 批 
量 更 新 。 
@ 浏览 器 可 以 实现 对 目标 脚本 文件 的 高 速 缓存 ， 这 样 可 以 避免 因 引 用 同样 功能 的 脚本 
代码 而 导致 下 载 时 间 过 长 。 
与 C 语言 使 用 外 部 头 文件 (.h 文件 等 ) 相 似 ， 引 入 JavaScript 脚本 代码 时 使 用 外 部 脚本 文件 
的 方式 符合 结构 化 编程 思想 ， 但 也 有 一 些 缺点 ， 具 体 表现 在 以 下 两 个 方面 。 
@ ”并 不 是 所 有 支持 JavaScript 脚本 的 浏览 器 都 支持 外 部 脚本 ， 例 如 Netscape2 和 Internet 
Explorer 3 等 版 本 的 浏览 器 不 支持 外 部 脚本 。 
e ”外 部 脚本 文件 功能 过 于 复杂 ， 或 其 他 原因 导致 的 加 载 时 间 过 长 ， 则 可 能 导致 页 面 事 
件 得 不 到 处 理 或 得 不 到 正确 的 处 理 ， 程 序 员 必须 小 心 使 用 并 确保 脚本 加 载 完成 后 ， 
其 中 定义 的 函数 才 会 被 页 面 事件 调用 ， 否 则 浏览 器 会 报错 。 
综 上 所 述 ， 引 入 外 部 JavaScript 脚本 文件 的 方法 是 效果 与 风险 并 存 的 ， 设 计 人 员 应 该 权衡 
其 优 缺 点 ， 以 决定 是 将 脚本 代码 嵌入 到 目标 HTML 文件 中 ， 还 是 通过 引用 外 部 脚本 的 方式 来 
实现 相同 的 功能 。 一 般 情 况 下 ， 将 实现 通用 功能 的 JavaScript 脚本 代码 作为 外 部 脚本 文件 引 
用 ; 而 将 实现 特有 功能 的 JavaScript 代码 直接 嵌入 到 HTML 文件 中 的 <head> 与 </head> 标 签 对 
之 间 ， 使 其 及 时 并 正确 响应 页 面 事件 。 


1.3.5 “案例 一 一 通过 JavaScript 伪 URL 引入 JavaScript 脚本 代码 


在 多 数 支持 JavaScript 脚本 的 浏览 器 中 ， 可 以 通过 JavaScript 伪 URL 地 址 调用 语句 来 引 
入 JavaScript 脚本 代码 。 伪 URL 地 址 的 格式 一 般 是 : JavaScriptalert(" 已 点 击 文本 框 ! ")。 由 此 
可 知 : 伪 URL 地 址 语句 一 般 以 JavaScript 开始 ， 其 后 所 跟 的 语句 就 是 要 执行 的 操作 。 

【 例 1.6】 (实例 文件 ，ch01\1.6.htmD) 使 用 伪 URL 地 址 来 引入 JavaScript 代码 。 

<html> 

<head> 

<meta http-equiv=content-type content="text/html; charset=gb2312"> 

<title> 伪 URL 地 址 引入 Javascript 脚本 代码 </title> 


</head> 
<body> 


全 


JavaScript 动 态 网 站 开发 
案例 课堂 DE 


<center> 
<p> 使 用 伪 URL 地 址 引入 Javascript 脚本 代码 </p> 
<form name="Forml"> 
<input type=text name="Textl" value=" 点 击 " 
onclick="JavaSscript:alert (' 已 经 用 鼠标 点 击 文本 框 !' ) "> 
</form> 
</center> 
</body> 
</html> 


在 正 浏 览 器 中 预览 上 面 的 HIML 文件 ， 然 后 用 鼠标 单 击 其 中 的 文本 框 ， 就 会 看 到 “已 经 
用 鼠标 点 击 文本 框 !” 的 提示 信息 ， 其 显示 结果 如 图 1-9 所 示 。 


图 1-9 使 用 伪 URL 地 址 引入 JavaScript 脚本 代码 


伪 URL 地 址 可 用 在 文档 的 任何 地 方 ， 同 时 触发 任意 数量 的 JavaScript 函数 或 对 象 固有 的 方 
法 。 由 于 这 种 方式 的 代码 短 而 精 且 效果 好 ， 所 以 在 表单 数据 合法 性 验证 上 (例如 验证 某 些 字 段 是 
否 符 合 要 求 ) 等 方面 应 用 广泛 。 


1.4 ”JavaScript 和 浏览 器 


与 HTML 一 样 ，JavaScript 也 需要 用 Web 浏览 器 显示 ， 不 同 浏览 器 的 显示 可 能 有 所 不 
同 。 与 HTML 相 比 ， JavaScript 在 不 兼容 的 浏览 器 上 显示 会 有 很 大 差别 ， 不 仅 文本 显示 不 正 
确 ， 而 且 脚本 程序 根本 无 法 运行 ， 甚 至 还 可 能 会 显示 错误 信息 和 浏览 器 骨 溃 现象 。 


1.4.1 案例 一 一 在 Internet Explorer 中 调用 JavaScript 代码 


Internet Explorer 内 部 采用 了 许多 微软 的 专利 技术 ， 例 如 ActiveX 等 技术 。 这 些 技术 的 应 
用 提高 了 JavaScript 的 使 用 范围 (用 户 甚至 可 以 使 用 ActiveX 控件 操作 本 地 文件 )， 但 是 降低 了 
安全 性 ， 而 且 这 些 技术 有 很 多 不 符合 W3C 规范 ， 使 得 在 Internet Explorer 下 开发 的 页 面 在 其 
他 Web 浏览 器 中 无 法 正常 显示 ， 甚 至 无 法 使 用 。 在 Intemet Explorer 中 可 得 到 页 面 中 id 为 
txtld、name 为 txtName、type 为 text 的 对 象 。 在 页 面 中 定义 text 对 象 的 代码 如 下 : 


<input type="text" id="txtld" name="txtName" value=""> 


在 Internet Explorer 中 使 用 JavaScript 得 到 text 对 象 的 代码 如 下 : 


Var txtNameObjl = document.forms[0] .elements ("txtName"); 
Var txtNameObj2 = document .getElementByld("txtld"); 


Var txtNameObj3 = document .frmTxt-elements ("txtName") 7 
Var txtNameObj4 = document.all.txtName; 


1.4.2 ”案例 一 一 在 Firefox 中 调用 JavaScript 代码 


Firefox 浏览 器 是 Mozilla 基金 会 推出 的 一 种 自由 、 开 放 源 代码 的 浏览 器 。 它 有 一 些 高 级 
特征 : 标签 式 浏 览 、 使 上 网 冲浪 更 快 、 可 以 禁止 弹出 式 窗 口 、 自 定制 工具 栏 、 扩 展 管理 、 更 
好 的 搜索 特性 、 快 速 而 方便 的 侧 栏 。 其 最 新 版 本 是 3.0.6。 该 版 本 做 了 脱胎 换 骨 的 更 新 ， 代 码 
更 优秀 ， 功 能 更 强大 ， 包 括 安装 程序 、 界 面 和 下 载 管理 器 都 作 了 改进 。 在 Firefox 浏览 器 中 使 
用 JavaScript 得 到 案例 8 中 text 对 象 的 代码 如 下 : 


Var txtNameObj2 = document.getElementByld ("txtld"); 
var txtNameObj4 = document.all.txtName; 


1.4.3 ”案例 一 一 在 Opera 中 调用 JavaScript 代码 


Opera 是 一 个 小 巧 而 功能 强大 的 跨 平台 互联 网 套件 ， 包 括 网 页 浏览 、 下 载 管理 、 邮 件 客户 
端 、RSS 阅读 器 、IRC 聊天 、 新 闻 组 阅读 、 快 速 笔记 、 幻 灯 显 示 (Operashow) 等 功能 。Opera 
支持 多 种 操作 系统 ， 例 如 Windows、Linux、Mac、FreeBSD、Solaris、BeOS、0OS/2、QNX 
等 。 此 外 ，Opera 还 有 手机 版 本 ， 也 支持 多 语言 ， 包 括 简体 中 文 和 繁体 中 文 。 

在 Opera 浏览 器 中 使 用 JavaScript 得 到 案例 8 中 text 对 象 的 代码 如 下 : 


Var txtNameObjl1 = document .form[0] .elements ("txtName"); 
Var txtNameObj2 = document.getElementByld("txtld"); 
Var txtNameObj3 = document .frmTxt .elements ("txtName"); 
Var txtNameObj4 = document .al1.txtName7 


在 不 同 的 浏览 器 下 ， 提 示 信 息 的 显示 效果 会 有 所 不 同 。 对 于 一 些 经 常用 到 的 页 面 中 关于 
尺寸 的 属性 ， 例 如 scrollTop 、scrollLeft、scrollWidth、scrollHeight 等 ， 只 有 Internet Explorer 
与 Firefox 会 支持 ，Opera 则 不 支持 。 


1.4.4 案例 一 一 浏览 器 中 的 文档 对 象 类 型 


不 同 浏览 器 使 用 JavaScript 操作 同一 个 页 面 中 同一 个 对 象 的 方法 不 同 ， 就 会 造成 页 面 无 法 
跨 平台 。 对 象 类 型 (DOM) 正 是 为 解决 在 不 同 浏览 器 中 使 用 JavaScript 操作 对 象 的 方法 不 同 的 问 
题 而 出 现 的 。DOM 可 访问 页 面 中 的 其 他 标准 组 件 ， 解 决 了 Netscape 的 JavaScript 和 Microsoft 
的 JavaScript 之 间 的 冲突 ， 给 Web 设计 师 和 开发 者 提供 了 一 个 标准 的 方法 ， 让 他 们 来 访问 站 
点 中 的 数据 、 肢 本 和 表现 层 对 象 。document.getElementById0 可 根据 ID 得 到 页 面 中 的 对 象 ， 
这 个 方法 就 是 DOM 的 标准 方法 ， 在 这 3 种 浏览 器 (Internet Explorer、Firefox、Opera) 中 都 
适用 。 

DOM 是 以 层次 结构 组 织 的 节点 或 信息 片段 的 集合 。 这 个 层次 结构 允许 开发 人 员 在 
树 中 寻找 特定 信息 。 分 析 该 结构 通常 需要 加 载 整个 文档 和 构造 层次 结构 。 由 于 它 是 基 
于 信息 层次 的 ， 因 而 DOM 被 认为 是 基于 树 或 对 象 的 。 
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1.5” 跟 我 练 练 手 


1. 练习 目标 

能 够 熟练 掌握 本 章 所 讲 内 容 。 

2. 上 机 练习 

练习 1: JavaScript 编写 工具 的 使 用 。 


NN 练习 2: JavaScript 在 HIML 中 的 使 用 。 
NN 练习 3: 在 浏览 器 中 调用 JavaScript 代码 。 


N 
pe 
ES 1.6 ”实战 演练 一 一 一 个 简单 的 JavaScript 实例 
本 例 是 一 个 简单 的 JavaScript 程序 ， 主 要 用 来 说 明 如 何 编写 JavaScript 程序 以 及 在 HTML 
SN 中 使 用 JavaScript 程序 。 本 例 主要 实现 的 功能 为 : 当 页 面 打开 时 ， 将 显示 “尊敬 的 客户 ， 欢 迎 


Ne 您 光临 本 网 站 ”对 话 框 ， 当 页 面 关闭 时 将 弹出 “欢迎 下 次 光临 ! ”对 话 框 。 程 序 效果 分 别 如 
图 1-10 和 图 1-11 所 示 。 


袜 件 (fF) 注 吕 (FE) 豆 器 V) 必 襄 袍 (A] 工具 f)。 才 寺 1H) 


图 1-10 页面 加 载 时 的 效果 图 1-11 页 面 关闭 时 的 效果 


具体 操作 步骤 如 下 。 
EECDUDp 新 建 HTML 文档 ， 输 入 以 下 代码 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 第 一 个 Javascript 程序 </title> 
</head> 

<body> 

</body> 

</html> 


EC 保存 HIML 文件 。 选 择 相应 的 保存 位 置 ， 将 文件 命名 为 “welcome .html”。 
在 HIML 文档 的 head 部 分 ， 输 入 以 下 代码 : 
<script> 
<script> 
// 页 面 加 载 时 执行 的 函数 


function showEnter(){ 


alert ("尊敬 的 客户 ， 欢 迎 您 光临 本 网 站 ") ; 
} 
// 页 面 关闭 时 执行 的 函数 


function showLeave(){ 


alert ("欢迎 下 次 光临 ! ") ; 
} 
// 页 面 加 载 事件 触发 时 调用 函数 


window.onload=showEnter; 

// 页 面 关 闭 事件 触发 时 调用 函数 

window.onbeforeunload=showLeave; 
</script> 


EE 保存 网 页 ， 浏 览 最 终 效果 。 
1.7 高 手 甜 点 


甜点 1: 什么 是 脚本 语言 ? 


脚本 语言 是 由 传统 编程 语言 简化 而 来 的 ， 它 与 传统 编程 语言 既 有 很 多 相似 之 处 ， 又 有 很 
多 不 同 之 处 。 脚 本 语言 的 最 显著 特点 是 : 四 它 不 需要 编译 成 二 进 制 ， 以 文本 的 形式 存在 ;四 
脚本 语言 一 般 都 需要 其 他 语言 的 调用 执行 ， 不 能 独立 运行 。 

甜点 2: JavaScript 是 Java 的 变种 吗 ? 


JavaScript 最 初 的 确 是 受 Java 启发 而 开始 设计 的 ， 而 且 设计 的 目的 之 一 就 是 “看 上 去 像 
Java”， 因 此 语法 上 有 很 多 类 似 之 处 ， 许 多 名 称 和 命名 规范 也 借 自 Java。 但 是 实际 上 ， 
JavaScript 的 主要 设计 原则 源 自 Self 和 Scheme， 它 与 Java 有 本 质 的 不 同 。 它 与 Java 名 称 上 的 
近似 ， 是 当时 网 景 为 了 营销 考虑 与 Sun 公司 达成 协议 的 结果 。 其 实 从 本 质 上 讲 JavaScript 更 像 
是 一 门 函数 式 编程 语言 ， 而 非 面 向 对 象 的 语言 ， 它 使 用 一 些 智能 的 语法 和 语义 来 仿真 高 度 复 
杂 的 行为 。 其 对 象 模型 极为 灵活 、 开 放 和 强大 ， 具 有 全 部 的 反射 性 。 

甜点 3: JavaScript 与 JScript 相同 吗 ? 


为 了 取得 技术 优势 ， 微 软 推出 了 JScript 来 迎战 JavaScript 的 脚本 语言 。 为 了 互 用 性 ， 
Ecma 国际 协会 (前 身 为 欧洲 计算 机 制造 商 协会 ) 建 立 了 ECMA-262 标准 (ECMAScript)。 现 在 两 
者 都 属于 ECMAScript 的 实现 。 


机 了 中 
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甜点 4: JavaScript 是 一 门 简单 的 语言 吗 ? 

尽管 JavaScript 作为 非 程 序 人 员 的 脚本 语言 ， 而 非 作 为 程序 人 员 的 编程 语言 来 推广 和 宣 
传 ， 但 是 JavaScript 是 一 门 具有 非常 丰富 特性 的 语言 ， 它 有 着 和 其 他 编程 语言 一 样 的 复杂 性 ， 
或 更 甚 复杂。 实际 上 ， 你 只 有 对 JavaScript 有 了 扎实 的 理解 之 后 ， 才 能 用 它 撰写 出 比较 复杂 的 
程序 。 


语言 言 ， 都 具有 数据 类 型 、 


言 ， 还 是 脚本 语 
符 、 表 达 式 、 注 释 语句 、 流 程控 制 语句 等 基本 元 素 构成 ， 这 些 基本 元 素 构 成 了 编程 


无 论 是 传统 编程 语 
基础 。 本 章 将 主要 讲述 JavaSec 


ript 编程 的 基本 知识 。 
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2.1 JavaScript 的 基本 语法 
JavaScript 可 以 直接 用 记事 本 编写 ， 其 中 包括 语句 、 语 句 块 及 注释 ， 有 具体 内 容 如 下 。 


2.1.1 语句 执行 顺序 


JavaScript 程序 按照 在 HIML 文件 中 出 现 的 顺序 逐 行 执行 。 如 果 需 要 在 整个 HTML 文件 
中 执行 ， 最 好 将 其 放 在 HTML 文件 的 “<head>.….</head>” 标 签 中 。 某 些 代 码 ， 例 如 函数 体内 
的 代码 ， 不 会 被 立即 执行 ， 只 有 当 所 在 的 函数 被 其 他 程序 调用 时 ， 该 代码 才 被 执行 。 


2 人 2 区 分 大 小 写 


JavaScript 对 字母 的 大 小 写 很 敏感 ， 也 就 是 说 ， 在 输入 语句 的 关键 字 、 函 数 、 变 量 ， 以 及 
其 他 标识 符 时 ， 一 定 要 严格 区 分 字母 的 大 小 写 。 例 如 变量 usemame 与 变量 userName 在 
JavaScript 中 就 是 两 个 不 同 的 变量 。 


Sn HTML 不 区 分 大 小 写 。 由 于 JavaScript 与 HTML 紧密 相关 ， 这 一 点 很 容易 混 
外 消 。 许 多 JavaScript 对 象 和 属性 都 与 其 代表 的 HTML 标签 或 属性 同名 ， 在 HTML 
中 ， 这 些 名 称 可 以 以 任意 的 大 小 写 方式 输入 而 不 会 引起 混乱 ; 但 在 JavaScript 

中 ， 这 些 名 称 通常 都 是 小 写 的 。 例 如 ， 在 HTML 中 的 事件 处 理 器 属性 ONCLICK 


通常 被 声明 为 onClick 或 Onclick， 而 在 JavaScript 中 只 能 写作 onclick。 


2.13 分 号 与 室 格 


在 JavaScript 语句 当中 ， 分 号 可 有 可 无 ， 这 一 点 与 Java 语言 不 同 ，JavaScript 并 不 要 求 每 
行 必须 以 分 号 作为 语句 的 结束 标志 。 如 果 语 句 的 结束 处 没有 分 号 ，JavaScript 会 自动 将 该 代码 
的 结尾 作为 语句 的 结尾 。 

例如 ， 下 面 的 两 行 代码 书写 方式 在 JavaScript 中 都 是 正确 的 : 


Alert ("hello, Javascript") 
Alert ("hello, Javascript"); 


5 最 好 的 编写 习惯 是 ， 在 每 行 的 结尾 加 上 分 号 ， 这 样 能 保证 每 行 代码 的 准 
SN 而 性 。 


另外 ，JavaScript 会 忽略 多 余 的 空格 ， 用 户 可 通过 向 脚本 添加 空格 来 提高 其 可 读 性 。 例 如 
下 面 的 两 行 代码 ， 一 行 添加 了 空格 ， 另 一 行 没 有 空格 ， 但 它们 是 等 效 的 : 


Var name="Hello"; 
Var name = "Hello"; 


2.1.4 对 代码 行进 行 折 行 


当 一段 代 码 比较 长 时 ， 用 户 可 以 在 文本 字符 串 中 使 用 反 斜 本 对 代码 行进 行 换行 。 示 例 代 
码 如 下 : 


document .write ("Hello \ 
World!"); 


不 过 ， 用 户 不 能 像 下 面 的 代码 那样 转行 : 


document .write \ 
("Hello World!"); 


2.1.5 ”注释 


注释 通常 用 来 解释 程序 代码 的 功能 (增加 代码 的 可 读 性 ) 或 阻止 代码 的 执行 (调试 程序 )， 且 
不 参与 程序 的 执行 。 在 JavaScript 中 注释 分 为 单行 注释 和 多 行 注释 两 种 。 

1. 单行 注释 

在 JavaScript 中 ， 单 行 注 释 以 双 斜 枉 “/ ”开始 ， 直 到 该 行 结束 。 单 行 注释 的 “/” 可 以 
放 在 行 首 或 行 尾 ， 无 论 放 在 哪里 ， 只 要 从 “//” 开 始 到 该 行 结束 的 所 有 内 容 都 不 会 被 执行 。 在 
一 般 情况 下 ， 如 果 “//” 位 于 行 首 ， 则 表示 解释 的 是 下 一 行 或 下 一 段 代 码 功 能 ， 如 果 “//” 位 
于 行 尾 ， 则 表示 解释 的 是 当前 行 代码 的 功能 ， 如 果 用 来 阻止 一 行 代码 的 执行 ， 也 常 将 “//” 放 
在 行 首 ， 例 如 例 2.1 中 所 示 的 加 粗 部 分 。 

【 例 2.1】 (实例 文件 ，ch02\2.1.html) 单 行 注释 语句 。 


<!DOCTYPE html> 

<html> 

<head> 

<title>date 对 象 </title> 

<script type="text/javascript"> 
function disptime( ) 


{ 
// 创 建 日 期 对 象 now， 并 实现 当前 日 期 的 输出 
Var now= new Date( ); 
//document .write ("<h1> 河 南 旅游 网 </h1>"); 
document .write ("<H2> 今 天 日 期 :"+now.getFullYear ()+" 年 "+ (now.getMonth( )+1)+ 
"月 "+now.getDate ()+" 日 </H2>") ; ”// 在 页 面 上 显示 当前 年 月 日 
} 
</script> 
<body onload="disptime( )"> 
</body> 
</html> 


上 述 代码 共 使 用 三 个 注释 语句 。 第 一 个 注释 语句 将 “//” 放 在 了 行 首 ， 通 常用 来 解释 其 下 
一 行 代码 的 功能 与 作用 。 第 二 个 注释 语句 放 在 了 代码 行 的 行 首 ， 阻 止 了 该 行 代码 的 执行 。 第 
三 个 注释 语句 放 在 了 代码 行 的 行 尾 ， 主 要 是 对 该 行 的 代码 进行 解释 说 明 。 

上 述 代码 在 正 9.0 浏览 器 中 显示 效果 如 图 2-1 所 示 ， 从 中 可 以 看 出 代码 中 的 注释 没有 被 
执行 。 
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今天 日 期 :201S 年 8 月 3 日 


图 2-1 程序 运行 结果 
2. 多 行 注释 


单行 注释 语句 只 能 注释 一 行 代码 ， 而 如 果 在 调试 程序 时 ， 和 希望 有 一 段 代 码 都 不 被 浏览 器 
执行 或 者 对 代码 的 注释 文字 超过 了 一 行 ， 那 么 就 需要 使 用 多 行 注释 。 多 行文 字 注 释 以 # 开 
始 ， 以 */ 结 束 。 

【 例 2.2】 (实例 文件 ，ch02\2.2.htmD) 多 行 注 释 语句 。 


<!DOCTYPE html> 
<html> 

Se <body> 

NS <hl id="myH1"></hl> 
> <p id="myP"></p> 

<script type="text/javascript"> 
/* 
下 面 的 这 些 代 码 会 输出 
一 个 标题 和 一 个 段落 
并 将 代表 主页 的 开始 
wd 
document .getElementById("myHl1") .innerHTML="Welcome to my Homepage"; 
document .getElementById("myP") .innerHTML="This is my first paragraph."; 
</script> 
<p><b> 注 释 : </b> 注 释 块 不 会 被 执行 。</p> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-2 所 示 ， 从 中 可 以 看 出 代码 中 的 注释 没有 
被 执行 。 


| eucerswminist D> © x | Haveer Madrinier + 
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Welcome to my Homepage 


This is ny first paragraph 
广 释 : 注释 块 不 会 被 执行 、 


2-2 程序 运行 结果 
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2.1.6 ”语句 


JavaScript 程序 是 语句 的 集合 ， 一 条 JavaScript 语句 相当 于 英语 中 的 一 个 完整 句子 。 
JavaScript 语句 将 表达 式 组 合 起 来 ， 完 成 一 定 的 任务 。 一 条 语句 由 一 个 或 多 个 表达 式 、 关 键 字 
或 运算 符 组 成 ， 语 句 之 间 用 分 号 (:) 隔 开 。 也 就 是 说 ， 分 号 是 一 条 JavaScript 语句 的 结束 符号 。 

例如 以 下 JavaScript 语句 ， 其 中 一 行 就 是 一 条 JavaScript 语句 : 


Name=" 张 三 "; // 将 “ 张 三 ” 赋 值 给 name 
Var today=new Date () // 将 今天 的 日 期 赋值 给 today 


【 例 2.3】 (实例 文件 ，ch02\2.3.html) 操 作 两 个 HTML 元 素 。 


<!DOCTYPE html> 

<html> 

<body> 

<h1> 我 的 网 站 </h1> 

<p id="demo"> 一 个 段落 .</p> 

<div id="myDIV"> 一 个 aiv 块 .</div> 

<script type="text/javascript"> 
document .getElementById ("demo") .innerHTML="Hello JavaSsScript"; 
document .getElementById ("myDIV") .innerHTML="How are you?"; 

</script> 

</body> 

</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 2-3 所 示 。 


和 HAWUserswdminis 亡 CX | HUsersAdministr.. x 
文件 将 谋 E) 下 看 V)， 改 硬 关 A)。 工具) 部 和 (Hl 


我 的 网 站 


Hello JavaScript 


How are you? 


图 2-3 程序 运行 结果 


2.1.7 ”语句 块 


语句 块 是 一 些 语句 的 组 合 ， 通 常 语句 块 都 会 被 一 对 大 括号 括 起 来 。 在 调用 语句 块 时 ， 
JavaScript 会 按 书写 次 序 执行 语句 块 中 的 语句 。JavaScript 会 把 语句 块 中 的 语句 看 成 是 一 个 整 
体 全 部 执行 ， 语 句 块 通常 用 在 函数 或 流程 控制 语句 中 。 例 如 以 下 代码 就 是 一 个 语句 块 : 
if (Fee < 2) 
{ 
Eee = 2; ”// 小 于 2 元 时 ， 手 续费 为 2 元 
} 
语句 块 的 作用 是 使 语句 序列 一 起 执行 。JavaScript 函数 是 将 语句 组 合 在 块 中 的 典型 例子 。 
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【 例 2.4】 (实例 文件 : ch02\2.4.htmD 运 行 可 操作 两 个 HIML 元 素 的 函数 。 


<html> 

<body> 

<h1> 我 的 网 站 </h1> 

<p id="myPar"> 我 是 一 个 段落 .</p> 

<div id="myDiv"> 我 是 一 个 div 块 .</div> 

<p> 

<button type="button"” onclick="myFunction()"> 点 击 这 里 </button> 

</p> 

<script type="text/javascript"> 

function myFunction() 

{ 
document .getElementById ("myPar") .innerHTML="Hello JavaSscript"; 
document .getElementById ("myDiv") .innerHTML="How are you?"; 

i 

</script> 

<p> 当 您 点 击 上 面 的 按钮 时 ， 两 个 元 素 会 改变 。</p> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-4 所 示 。 单 击 【 点 击 这 里 】 按 钮 ， 可 以 看 
到 两 个 元 素 发 生 了 变化 ， 如 图 2-5 所 示 。 
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我 是 一 个 段 交 Hello Javaseript 
敌 是 一 个 div 据 , Hom are you? 
当 您 点 击 上 而 的 按 乌 时 ， 两 个 元 兹 会 改变 ， 当 你 点 击 上 而 的 按 钼 时， 两 个 元 素 会 改变 ， 


图 2-4 程序 运行 结果 图 2-5 程序 运行 结果 


2.2 ”JavaScript 的 数据 结构 


每 一 种 计算 机 编程 语言 都 有 自己 的 数据 结构 ，JavaScript 脚本 语言 的 数据 结构 包括 标识 
符 、 关 键 字 、 保 留 字 、 常 量 、 变 量 等 。 


2.2.1 标识 名 


JavaScript 编写 程序 时 ， 其 中 的 变量 、 函 数 等 要 素 定义 时 都 要 求 给 定名 称 。 在 定义 要 素 时 
使 用 的 字符 序列 被 称 为 标识 符 。 这 些 标识 符 必须 遵循 以 下 命名 规则 。 
e ”标识 符 只 能 由 字母 、 数 字 、 下 划 线 和 中 文 组 成 ， 而 不 能 包含 空格 、 标 点 符号 、 运 算 
符 等 其 他 符号 。 
® ”标识 符 的 第 一 个 字符 必须 是 字母 、 下 划 线 或 者 汉字 。 


e@ ”标识 符 不 能 与 JavaScript 中 的 关键 字 名 称 相同 ， 例 如 ， 过 、else 等 。 


例如 ， 以 下 字符 为 合法 的 标识 符 : 


UserName 
Int2 

File Open 
Sex 


以 下 字符 为 不 合法 的 标识 符 : 


99BottlesofBeer 
Namespace 
EE SSALL Over 


2.2.2 关键 字 


关键 字 用 于 标识 JavaScript 语句 的 开头 或 结尾 。 根 据 规定 ， 关 键 字 是 保留 的 ， 不 能 用 作 变 


量 名 或 函数 名 ， 如 表 2-1 所 示 。 


表 2-1 JavaScript 中 的 关键 字 


Case catch continue 


delete 


finall for 


in instanceof 
[ms ew i 


else 


[fmction | 


return 


while 


with | | 


了 提示 JavaScript 中 的 关键 字 不 能 被 作为 变量 名 和 函数 名 使 用 。 


2.2.3 保留 字 


保留 字 在 某 种 意义 上 是 为 将 来 的 关键 字 而 保留 的 单词 。 因 此 保留 字 不 能 被 用 作 变 量 名 或 


函数 名 ， 如 表 2-2 所 示 。 


表 2-2 JavaScript 中 的 保留 字 


abstract boolean byte char 

class | const debugger | double 
enum | export extends | final 

float | goto implements | import 

int | interface long | native 
package | private protected | public 

short | static super | synchronized 


throws, transient 


volatile 


加 


攻 Z 涉 中 
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ra 如 果 将 保留 字 用 作 变 量 名 、 函 数 名 或 对 象 名 ， 那 么 在 浏览 器 执行 时 ， 会 将 该 
单词 看 作 关 键 字 ， 从 而 出 现 错误 提示 信息 。 


2.2.4 常量 


简单 地 说 ， 常 量 是 字面 变量 ， 是 固化 在 程序 代码 中 的 信息 ， 常 量 的 值 从 定义 开始 就 是 固 
定 的 。 常 量 主要 为 程序 提供 固定 和 精确 的 值 ， 包 括 数值 和 字符 串 ， 如 数字 、 逻 辑 值 真 (rue)、 
逻辑 值 假 (false) 等 。 

通常 使 用 const 来 声明 常量 。 语 法 格式 如 下 : 


const 


常量 名 : 数据 类 型 = 值 ; 
2.2.5 变量 


变量 ， 顾 名 思 义 ， 在 程序 运行 过 程 中 ， 其 值 可 以 改变 。 变 量 是 存储 信息 的 单元 ， 它 对 应 
于 某 个 内 存 空间 ， 用 于 存储 特定 数据 类 型 的 数据 。 程 序 能 在 变量 中 存储 值 和 读 取 值 。 


1. 变量 的 命名 


实际 上 ， 变 量 的 名 称 是 一 个 标识 符 。 在 JavaScript 当中 ， 用 标识 符 来 命令 变量 和 函数 ， 变 
量 的 名 称 可 以 是 任意 长 度 。 创 建 变 量 名 称 时 ， 应 遵循 以 下 规则 。 

e 第 一 个 字符 必须 是 一 个 ASCII 字符 (大 小 写 不 限 ) 或 一 个 下 划 线 “_”， 但 是 不 能 
是 汉字 。 

e@ ”后 续 的 字符 必须 是 字母 、 数 字 或 下 划 线 。 

@ ”变量 名 称 不 能 是 JavaScript 的 保留 字 。 

@ JavaScript 的 变量 名 是 严格 区 分 大 小 写 的 。 例 如 ， 变 量 名 称 myCounter 与 变量 名 称 
MyCounter 不 是 同一 个 变量 。 

以 下 是 一 些 正 确 的 变量 命名 示例 : 


pagecount 
Parts 
Numer 


以 下 是 一 些 错误 的 变量 命名 示例 : 


12balloon // 不 能 以 数字 开头 
Summary&Went //& 符 号 不 能 用 在 变量 名 称 中 


2. 变量 的 声明 与 赋值 


JavaScript 是 一 种 弱 类 型 的 程序 设计 语言 ， 变 量 可 不 用 声明 而 直接 被 使 用 。 所 谓 声明 变量 
即 为 变量 指定 一 个 名 称 。 声 明 变 量 后 ， 就 可 以 把 它们 当 作 存储 单元 来 用 。 

在 JavaScript 中 使 用 关键 字 var 声明 变量 时 ， 该 关键 字 之 后 的 字符 串 将 代表 一 个 变量 名 。 
其 格式 如 下 : 


售 26 


例如 ， 声 明 变 量 usemame， 用 来 表示 用 户 名 ， 代 码 如 下 : 


另外 ， 一 个 关键 字 var 也 可 以 同时 声明 多 个 变量 名 ， 多 个 变量 名 之 间 必 须 用 逗号 “,” 分 
隔 开 ， 例 如 ， 同 时 声明 变量 username、pwd、age， 分 别 表示 用 户 名 、 密 码 和 年 龄 ， 其 代 
码 如 下 : 


Var username, pwd,age; 


要 给 变量 赋值 ， 可 以 使 用 JavaScript 中 的 赋值 运算 符 ， 即 等 号 “=”。 
可 以 在 声明 变量 名 时 同时 赋值 ， 例 如 ， 声 明 变量 usemame， 并 赋值 为 “ 张 三 ”， 其 代码 
如 下 : 


var username= " 张 三 "; 


声明 变量 之 后 ， 对 变量 赋值 ， 或 者 对 未 声明 的 变量 直接 赋值 。 例 如 ， 声 明 变量 age， 然 后 
再 为 它 赋值 ， 直 接 对 变量 count 赋值 ， 其 代码 如 下 : 
Var age; // 声 明 变量 


age=18; // 对 已 声明 的 变量 赋值 
count=4; // 对 未 声明 的 变量 直接 赋值 
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CE 
Re JavaScript 中 的 变量 如 果 未 初始 化 (赋值 )， 其 默认 值 为 undefind。 


3. 变量 的 作用 范围 
所 谓 变量 的 作用 范围 是 指 可 以 访问 该 变量 的 代码 区 域 。JavaScript 中 按 变 量 的 作用 范围 分 
为 全 局 变量 和 局 部 变量 。 
® ”全 局 变量 :可 以 在 整个 HTML 文档 范围 中 使 用 的 变量 。 这 种 变量 通常 都 是 在 函数 体 
外 定义 的 变量 。 
®。 ”局 部 变量 :只 能 在 局 部 范围 内 使 用 的 变量 。 这 种 变量 通常 都 是 在 函数 体内 定义 的 变 
量 ， 所 以 只 能 在 函数 体 中 有 效 。 


Sm 省 略 关键 字 var 声明 的 变量 ， 无 论 是 在 函数 体内 ， 还 是 在 函数 体外 ， 都 是 全 


局 交 量 。 


【 例 2.5】 (实例 文件 : ch022.5htmD 创 建 了 名 为 camame 的 变量 ， 并 向 其 赋值 
“Volvo”， 然 后 把 它 放 入 id="demo" 的 HTML 段落 中 。 


<!DOCTYPE html> 

<html> 

<body> 
<p> 点 击 这 里 来 创建 变量 ， 并 显示 结果 。</p> 
<button onclick="myFunction() "> 点击 这 里 </button> 
<p id="demo"></p> 

<script type="text/javascript"> 

function myFunction() 


JavaScript 动 态 网 站 开发 
案例 课堂 由 一 


{ 
Var carname="Volvo"; 
document .getElementById ("demo") .innerHTML=carname; 
: 
</script> 
</body> 
</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 2-6 所 示 。 单 击 其 中 的 【点 击 这 里 】 按 钮 ， 
可 以 看 到 创建 了 名 为 “Volvo” 的 变量 ， 如 图 2-7 所 示 。 


ET 
点 击 这 里 来 创建 交 量 ， 并 显示 结果 . 


[全 SECCCECE 
二 


点 击 这 里 未 创建 交 量 ， 并 显示 结果 . 


Yolvo 


图 2-6 程序 运行 结果 图 2-7 程序 运行 结果 


= 
ee 一 个 好 的 编程 习惯 是 在 代码 开始 处 ， 统 一 对 需要 的 变量 进行 声明 。 


2.3 JavaScript 的 数据 类 型 


每 一 种 计算 机 语言 除了 有 自己 的 数据 结构 外 ， 还 具有 自己 所 支持 的 数据 类 型 。 在 
JavaScript 脚本 语言 当中 ， 采 用 的 是 弱 数据 方式 ， 即 不 必 对 一 个 数据 先 做 声明 ， 可 以 在 使 用 或 
赋值 时 再 确定 其 数据 类 型 。 


2.3.1 案例 一 一 typeof 运算 符 
typeof 运算 符 有 一 个 参数 ， 即 要 检查 的 变量 或 值 。 例 如 : 


Var sTemp = "test string"; 

alert (typeof sTemp); // 输 出 “string” 

alert (typeof 86); // 输 出 “number” 

对 变量 或 值 调用 typeof 运算 符 将 返回 下 列 值 之 一 。 
undefined: 如 果 变 量 是 Undefined 类 型 的 。 

boolean: 如 果 变 量 是 Boolean 类 型 的 。 

number: 如 果 变量 是 Number 类 型 的 。 

string: 如 果 变 量 是 String 类 型 的 。 

object: 如 果 变 量 是 一 种 引用 类 型 或 Null 类 型 的 。 

【 例 2.6】 (实例 文件 ，ch02\2.6.htmDtypeof 运算 符 的 使 用 。 


洒 


<!DOCTYPE html> 
<html> 
<body> 
<script type="text/javascript"> 
typeof (1); 
typeof (NaN); 
typeof (Number .MIN VALUE); 
typeof (Infinity); 
typeof ("123"); 
typeof (true); 
typeof (window); 
typeof (document); 
typeof (null); 
typeof (eval); 
typeof (Date); 
typeof (sss); 
typeof (undefined); 
document .write ("typeof(1): "+typeof (1)+"<br>"); 
document .write ("typeof (NaN) : "+typeof (NaN)+"<br>"); 
document .write ("typeof (Number.MIN VALUE): 
"+typeof (Number .MIN VALUE)+"<br>") 
document .write ("typeof (Infinity): "+typeof (Infinity)+"<br>") 
document .write ("typeof(\"123\"): "+typeof ("123")+"<br>") 
document .write ("typeof (true) : "+typeof (true)+"<br>") 
document .write ("typeof (window): "+typeof (window)+"<br>") 
document .write ("typeof (document): "+typeof (document)+"<br>") 
document .write ("typeof (null): "+typeof (null)+"<br>") 
document .write ("typeof (eval): "+typeof (eval)+"<br>") 
document .write ("typeof (Date): "+typeof (Date)+"<br>") 
document .write ("typeof(sss): "+typeof(sss)+"<br>") 
document .write ("typeof (undefined): "+typeof (undefined)+"<br>") 
</script> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-8 所 示 。 
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图 2-8 程序 运行 结果 
2.3.2 ”案例 一 Undefined( 未 定义 ) 类 型 


Undefined 是 未 定义 类 型 的 变量 ， 表 示 变 量 还 没有 被 赋值 ， 例 如 “var a;”， 或 者 被 赋予 了 
一 个 不 存在 的 属性 值 ， 例 如 “var a=String.notProperty”。 


2® 
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此 外 ，JavaScript 中 有 一 种 特殊 类 型 的 数字 常量 NaN， 表 示 “ 非 数字 ”。 当 在 程序 中 由 于 
某 种 原因 发 生计 算 错 误 后， 将 产生 一 个 没有 意义 的 数字 ， 此 时 JavaScript 返回 的 数字 值 就 是 
NaN。 

【 例 2.7】 (实例 文件 ，ch02\2.7.htmD) 使 用 Undefined。 


<!DOCTYPE html> 
<html> 
<body> 
<script type="text/javascript"> 
var person; 
document .write (person + "<br />"); 
</script> 
</body> 
</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 2-9 所 示 。 


司 HUsersAdminist 只 OX | 久 HUsersAdminist'., x 
文件 (| 刀 驻 下 吾 看 (V) ， 妆 页 闪 (A) 工具 TT) 帮助 (H) 


undefined 


图 2-9 程序 运行 结果 
2.3.3 ”案例 一 一 Null( 空 值 ) 类 型 


JavaScript 中 的 关键 字 Null 是 一 个 特殊 的 值 ， 表 示 空 值 ， 用 于 定义 空 的 或 不 存在 的 引用 。 
不 过 ，Null 不 等 同 于 空 的 字符 串 或 0。 由 此 可 见 ，Null 与 Undefined 的 区 别 是 : Null 表示 一 个 
变量 被 赋予 了 一 个 空 值 ， 而 Undefined 则 表示 该 变量 还 未 被 赋值 。 

【 例 2.8】 (实例 文件 ，ch02\2.8.htmD) 使 用 null。 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 
Var person; 
document .write (person + "<br />"); 
Var car=null 
document .write(car + "<br />"); 

</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-10 所 示 。 


2-10 ”程序 运行 结果 


2.3.4 ”案例 一 一 Boolean( 布 尔 ) 类 型 


布尔 类 型 Boolean 表示 一 个 逻辑 数值 ， 用 于 表示 两 种 可 能 的 情况 。 逻 辑 真 ， 用 true 表 


; 逻辑 假 ， 用 false 表示 。 通 常 ， 在 代码 中 使 用 1 表示 真 ， 使 用 0 表示 假 。 


【 例 2.9】( 实 例文 件 ， ch02\2.9.html) 使 用 Boolean 类 型 。 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 


var bl = Boolean("");  // 返 回 false， 空 字符 串 
var b2 = Boolean("s"); // 返 回 true， 非 空 字符 串 
var b3 = Boolean(0); // 返 回 false， 数 字 0 

var b4 = Boolean(1); // 返 回 true， 非 0 数字 

var b5 = Boolean(-1);  // 返 回 true, 非 0 数 字 

var b6 = Boolean (nul1); // 返 回 false 

var b7 = Boolean (undefined); // 返 回 false 
var b8 = Boolean (new Object()); // 返 回 true， 对 象 


document .write (bl + "<br>") 
document .write(b2 + "<br>") 
document .write(b3 + "<br>") 
document .write(b4 + "<br>") 
document .write(b5 + "<br>") 
document .write(b6 + "<br>") 
document .write (b7 + "<br>") 
document .write (b8 + "<br>") 

</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-11 所 示 。 
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2.3.5 ”案例 一 -Number( 数 值 ) 类 型 


JavaScript 的 数值 类 型 可 以 分 为 4 类 ， 即 整数 、 浮 点 数 、 内 部 常量 和 特殊 值 。 整 数 可 以 为 
正 数 、0 或 者 负数 ; 浮 点 数 可 以 包含 小 数 点 ， 也 可 以 包含 一 个 e( 大 小 写 均 可 ， 在 科学 记 数 法 
中 表示 “10 的 雳 ”)， 或 者 同时 包含 这 两 项 。 整 数 可 以 以 10( 十 进 制 )、8( 八 进 制 ) 和 16( 十 六 进 
制 ) 作 为 基数 来 表示 。 

【 例 2.10】 (实例 文件 ，ch02\2.10.htmD) 输 出 数值 。 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 
Var xl1=36.00; 
Var x2=36; 
Var Y=123e57 
Var Z=123e-57 
document .write (xl1 + "<br />") 
document .write (X2 + "<br />") 
document .write(y + "<br />") 
document .write(z + "<br />") 

</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-12 所 示 。 


目 HAUsersAdminist P ~ © X | @ HAUsers administr.. 
文件 站 闹 器 (E) 至 看 (V) 。 必 硬 闪 (A) 工具 (T) 高 动 (H) 
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图 2-12 程序 运行 结果 
2.3.6 ”案例 一 一 String( 字 符 串 数据 ) 类 型 


字符 串 由 一 对 单 引号 ( ") 或 双 引 号 (* ") 和 引号 中 的 部 分 构成 。 一 个 字符 串 是 JavaScript 中 的 
一 个 对 象 ， 有 专门 的 属性 。 引 号 中 间 的 部 分 可 以 是 任意 多 的 字符 ， 如 果 没 有 ， 则 是 一 个 空 字 
符 串 。 如 果 要 在 字符 串 中 使 用 双 引 号 ， 则 应 该 将 其 包含 在 使 用 单 引 号 的 字符 串 中 ， 使 用 单 引 
号 时 则 反之 。 

【 例 2.11】 (实例 文件 ，ch02\2.11.htmD) 输 出 字符 串 。 


<!DOCTYPE html> 
<html> 
<body> 


地 


<script type="text/javascript"> 
Var stringl="Bill Gates"7 
Var string2='Bill Gates'; 
Var string3="Nice to meet Youl"7 
Var string4="He is called 'Bil17'"7 
var SEEng5= Be 5s called “Bill""s 
document .write(stringl + "<br>") 


document .write(string2 + "<br>") 
document .write(string3 + "<br>") 
document .write(string4 + "<br>") 
document .write(string5 + "<br>") 

</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-13 所 示 。 
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Nice to meet you! 
He is called "Bill” 
He is called “Bill” 


图 2-13 程序 运行 结果 


2.3.7 ”案例 一 一 Object( 对 象 数据 ) 类 型 


前 面 介绍 的 5 种 数据 类 型 是 JavaScript 的 原始 数据 类 型 ， 而 Object 则 是 对 象 类 型 。 该 数 
据 类 型 中 包括 Object、Function、String、Number、Boolean、Array、Regexp、Date、Globel、 
Math、Error， 以 及 宿主 环境 提供 的 Object 类 型 。 

【 例 2.12】( 实 例文 件 ，ch02\2.12.htm])Object 数据 类 型 的 使 用 。 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 
person=new Object (); 
person.firstname="Bill"; 
person.lastname="Gates"; 
person.age=56; 
person.eyecolor="blue"; 
document .write (person.firstname + " is " + person.age + " years old."); 

</script> 

</body> 

</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 2-14 所 示 。 
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2-14 ”程序 运行 结果 


2.4 ” JavaScript 的 运算 符 


在 JavaScript 的 程序 中 要 完成 各 种 各 样 的 运算 ， 都 离 不 开 运算 符 。 它 用 于 将 一 个 或 几 个 值 
进行 运算 而 得 出 所 需要 的 结果 值 。 在 JavaScript 中 ， 运 算 符 可 以 分 为 算术 运算 符 、 比 较 运 算 
符 、 位 运算 符 、 逻 辑 运 算 符 、 赋 值 运算 符 和 条 件 运 算 符 等 。 


2.4.1 案例 一 一 算术 运算 符 


算术 运算 符 是 最 简单 、 最 常用 的 运算 符 ， 所 以 有 时 也 称 它 为 简单 运算 符 ， 可 以 使 用 它们 
进行 通用 的 数学 计算 。 

JavaScript 中 提供 的 算术 运算 符 有 +、-、*、/、%、++、-- 共 7 种 ， 分 别 表 示 加 、 减 、 
乘 、 除 、 求 余数 、 自 增 和 自 减 ， 如 表 2-3 所 示 。 其 中 +、-、*、/、% 为 二 元 运算 符 ， 表 示 对 运 
算 符 左右 两 边 的 操作 数 作 算术 运算 ， 其 运算 规则 与 数学 中 的 运算 规则 相同 ， 即 先 乘除 后 加 
减 。++ 和 -- 都 是 一 元 运算 符 ， 其 结合 性 为 自 右 向 左 ， 在 默认 情况 下 表示 对 运算 符 右边 变量 的 
值 增 1 或 减 1， 它 们 的 优先 级 比 其 他 算术 运算 符 高 。 


表 2-3 算术 运算 符 

运算 符 说 明 示 例 

+ 加 法 运算 符 ， 用 于 对 两 个 数字 进行 求 和 x+100、100+1000、+100 

减法 运算 符 或 负 值 运算 符 100-60、-100 

乘法 运算 符 100*6 

/ 除法 运算 符 100/50 

% 求 模 运 算 符 ， 也 就 是 算术 中 的 求 余 100%30, 
x++ 表 示 在 参与 其 他 运算 之 前 先 将 自己 加 1 
后 ， 再 用 新 的 值 参与 其 他 运算 ; 

加 1 后 该 

人 ++x 表示 先 用 原 值 与 其 他 值 运算 后 ， 再 将 自 

己 加 1 
将 变量 值 减 1 后 再 将 结果 赋值 给 该 变量 x--、--x， 与 ++ 的 用 法 相同 
【 例 2.13】 (实例 文件 : ch02\2.13.htmD) 通 过 JavaScript 在 页 面 中 定义 变量 ， 再 通过 运算 
符 计 算 变 量 的 运行 结果 。 


全 3 


<!DOCTYPE html> 

<html> 

<head> 

<title> 运 用 Javascript 运算 符 </title> 

</head> 

<body> 

<script type="text/javascript"> 
Var numl=120,num2 = 25; 
document .write("120+25=" + (numl+num2)+"<br>"); 
document .write ("120-25="+ (numl-num2)+"<br>"); 
document .write("120*25="+ (numl*num2)+"<br>"); 
document .write ("120/25="+ (numl/num2)+"<br>"); 
document .write("(120++)="+ (numl++)+"<br>"); 
document .write ("++120="+(++numl)+"<br>"); 

</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-15 所 示 。 


图 2-15 程序 运行 结果 


2.4.2 案例 一 一 比较 运算 符 


// 定 义 两 个 变量 

// 计 算 两 个 变量 的 和 
// 计 算 两 个 变量 的 差 
// 计 算 两 个 变量 的 积 
// 计 算 两 个 变量 的 余数 
// 自 增 运算 
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比较 运算 符 用 于 对 运算 符 的 两 个 表达 式 进行 比较 ， 然 后 根据 比较 结果 返回 布尔 类 型 的 值 
true 或 false。 例 如 ， 比 较 两 个 值 是 否 相 同 或 比较 两 个 数字 值 的 大 小 等 。 如 表 2-4 所 示 列 出 的 


是 JavaScript 支持 的 比较 运算 符 。 


表 2-4 比较 运算 符 
运算 符 说 明 示 例 
判断 左右 两 边 表达 式 是 否 相 等 ， 当 左边 表达 式 等 于 右边 表达 式 | Number 一 100 


时 返回 trme; 否则 返回 false 


Numberl 一 Number2 


判断 左边 表达 式 是 否 不 等 于 右边 表达 式 ， 当 左边 表达 式 不 等 于 
右边 表达 时 返回 true; 否则 返回 false 


Number != 100 
Numberl != Number2 


判断 左边 表达 式 是 否 大 于 右边 表达 式 ， 当 左边 表达 式 大 于 右边 
表达 式 时 返回 true; 否则 返回 false 


Number > 100 
Numberl > Number2 


判断 左边 表达 式 是 否 大 于 等 于 右边 表达 式 ， 当 左边 表达 式 大 于 
等 于 右边 表达 式 时 返回 tue; 否则 返回 false 


Number >= 100 
Numberl >= Number2 
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案例 课堂 四 一 
续 表 
示 例 
判断 左边 表达 式 是 否 小 于 右边 表达 式 ， 当 左边 表达 式 小 于 右边 | Number < 100 
表达 式 时 返回 true; 否则 返回 false Numberl <Number2 
判断 左边 表达 式 是 否 小 于 等 于 右边 表达 式 ， 当 左边 表达 式 小 于 | Number <= 100 
等 于 右边 表达 式 时 返回 true; 否则 返回 false Numer <= Number2 


【 例 2.14】 (实例 文件 ，ch02\2.14.htmD) 使 用 比较 运算 符 比较 两 个 数值 的 大 小 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 比 较 运 算 符 的 使 用 </title> 

</head> 

<body> 

<script type="text/javascript"> 
var age = 25; // 定 义 变量 
document .write ("age 变量 的 值 为 : "+age+"<br>"); // 输 出 变量 值 
document .write ("age>=20: "+(age>=20)+"<br>"); ”// 实 现 变 量 值 比较 
document .write ("age<20: "+(age<20)+"<br>"); 
document .write ("age!=20: "+(age!=20)+"<br>"); 
document .write ("age>20: "+(age>20)+"<br>"); 

</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-16 所 示 。 


此 ] H\UsersAdminist 只 ~ ecx] © tz 


文件 (F) ” 蝙 名 (E) 下 看 (V) 收藏 突 (A) 工具 (T) 帮助 (H) 
age 变 量 的 值 为 ，25 

age>=20，true 

age<20: false 
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2.4.3 ”案例 立 运算 符 

任何 信息 在 计算 机 中 都 是 以 二 进 制 的 形式 保存 的 ， 位 运算 符 就 是 对 数据 按 二 进 制 位 进行 
运算 的 运算 符 。JavaScript 语言 中 的 位 运算 符 有 : &( 与 )、|( 或 )、^( 异 或 )、~( 取 补 )、<<( 左 
移 )、>>( 右 移 )， 如 表 2-5 所 示 。 其 中 ，~ 运 算 符 为 一 元 运算 符 ， 而 其 他 的 位 运算 符 都 是 二 元 运 
算 符 。 这 些 运算 都 不 会 产生 溢出 。 位 运算 符 的 操作 数 为 整 型 或 者 是 可 以 转换 为 整 型 的 任何 其 


表 2-5 位 运算 符 
& 与 运算 。 操 作 数 中 的 两 个 位 都 为 1， 结果 为 1， 两 个 位 中 有 一 个 为 0， 结果 为 0 
| | 或 运算 。 操 作 数 中 的 两 个 位 都 为 0， 结 果 为 0， 否则 ， 结 果 为 1 
^ 异 或 运算 。 两 个 操作 位 相同 时 ， 结 果 为 0， 不 相同 时 ， 结 果 为 1 
~ 取 补 运算 ， 操 作 数 的 各 个 位 取 反 ， 即 1 变 为 0，0 变 为 1 
<< | 左 移 位 。 操 作 数 按 位 左 移 ， 高 位 被 丢弃 ， 低 位 顺序 补 0 
>> 右 移 位 。 操 作 数 按 位 右 移 ， 低 位 被 丢弃 ， 其 他 各 位 顺序 一 次 右 移 


【 例 2.15】 (实例 文件 ，ch02\2.15.html) 输 出 十 进 制 数 18 的 二 进 制 数 。 


<!DOCTYPE html> 
<html> 
<body> 
<h1> 输 出 十 进 制 18 的 二 进 制 数 </h1> 
<script type="text/javascript"> 
var iNum = 18; 
alert (iNum.toString (2)); 
</script> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-17 所 示 。18 的 二 进 制 数 只 用 了 前 5 位 ， 它 
们 是 这 个 数字 的 有 效 位 。 把 数字 转换 成 二 进 制 字符 串 ， 就 能 看 到 有 效 位 。 这 段 代 码 只 输出 
“10010”， 而 不 是 18 的 32 位 表示 。 这 是 因为 其 他 的 数位 并 不 重要 ， 仅 使 用 前 5 位 即 可 确定 
这 个 十 进 制 数值 。 


图 2-17 程序 运行 结果 
2.4.4 案例 一 一 逻辑 运算 符 


逻辑 运算 符 通常 用 于 执行 布尔 运算 ， 它 们 常 和 比较 运算 符 一 起 使 用 。 这 些 运 算 涉 及 的 变 
量 通常 不 止 一 个 ， 而 且 常 用 于 下 、while 和 for 语句 中 。 表 2-6 列 出 了 JavaScript 支持 的 逻辑 运 
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表 2-6 逻辑 运算 符 


逻辑 与 ， 若 两 边 表达 式 的 值 都 为 tue， 则 返回 true; 任 
意 一 个 值 为 false， 则 返回 false 


100>60 &&100<200 返回 true 
100>50&&10>100 返回 false 
100>60||10>100 返回 true 
100>600||50>60 返回 false 
!(100>60) 返 回 false 
!(100>600) 返 回 true 


&& 


逻辑 或 ， 只 有 表达 式 的 值 都 为 false 时 ， 才 返回 false 


逻辑 非 ， 若 表达 式 的 值 为 rue， 则 返回 false， 否 则 返回 
true 


【 例 2.16】 (实例 文件 ，ch02\2.16.html) 逻 辑 运算 符 的 使 用 。 


<!DOCTYPE html> 

<html> 

<body> 

<h1> 逻 辑 运算 符 的 使 用 </h1> 

<script type="text/javascript"> 
Var a=true,b=false; 
document .write(!a); 
document .write ("<br />"); 
document .write(!b); 
document .write("<br />"); 
a=true,b=true; 
document .write (ag&b); 
document .write ("<br />"); 
document .write (al |b); 
document .write("<br />"); 
a=true,b=false; 
document .write (ag&b); 
document .write ("<br />"); 
document .write (al |b); 
document .write ("<br />"); 
a=false,b=false; 
document .write (ag&b); 
document .write ("<br />"); 
document .write (al |b); 
document .write("<br />"); 


a=false,b=true; 
document .write (a&&b) 7 
document .write ("<br />"); 
document .write(allb); 
</script> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-18 所 示 。 
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2-18 ”程序 运行 结果 
从 运行 结果 可 以 看 出 逻辑 运算 符 的 规律 如 下 。 
@ true 的 ! 为 false; false 的 ! 为 true。 
@ a&&b: a、b 全 trme 则 表达 式 为 rue; 否则 表达 式 为 false。 
@ allb: a、 上 b 全 false 则 表达 式 为 false; 否则 表达 式 为 true。 
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2.4.5 ”案例 一 一 条 件 运算 符 


除了 上 面 介绍 的 常用 运算 符 外 ，JavaScript 还 支持 条 件 表达 式 运 算 符 “?”。 该 运算 符 是 
一 个 三 元 运算 符 ， 包 括 3 个 部 分 : 一 个 计算 值 的 条 件 和 两 个 根据 条 件 返 回 的 真 假 值 。 其 格式 
如 下 : 

条 件 ? 表示 式 1 : 表达 式 2 


在 使 用 条 件 运 算 符 时 ， 如 果 条 件 为 真 ， 则 表达 值 使 用 表达 式 1 的 值 ， 否 则 使 用 表达 式 2 
的 值 。 示 例如 下 : 


SR 


如 果 x 的 值 大 于 y 值 ， 则 表达 式 的 值 为 300; 否则 x 的 值 小 于 或 等 于 y 值 时 ， 其 表达 式 的 
值 为 11。 
【 例 2.17】 (实例 文件 ，ch02\2.17.htmD) 条 件 运 算 符 的 使 用 。 


<!DOCTYPE html> 
<html> 
<body> 
<h1> 条 件 运 算 符 的 使 用 </h1> 
<script type="text/javascript"> 
Var a=3; 
var b=5; 
Var c=b-a; 
document .write (c+"<br>"); 
if(a>b) 
{ document .write ("a 大 于 b<br>");} 
else 
{ document.write ("a 小 于 b<br>");} | 
document .write(a>b?"2":"3"); 
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</script> 

</body> 

</html> 

上 述 代码 创建 了 a 和 b 两 个 变量 ， 变 量 e 的 值 是 b 和 a 的 差 ， 紧 接着 使 用 站 语句 判断 a 
和 b 的 大 小 ， 并 输出 结果 。 最 后 使 用 了 一 个 三 元 运算 符 ， 如 果 a>b， 则 输出 2， 否 则 输出 3。 
<br> 表 示 在 网 页 中 换行 ，“+” 是 一 个 连接 字符 串 。 

上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-19 所 示 ， 可 以 看 到 网 页 输出 了 JavaScript 
语句 的 执行 结果 。 
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图 2-19 条 件 运算 符 的 使 用 
2.4.6 ”案例 一 一 赋值 运算 符 


赋值 就 是 把 一 个 数据 赋值 给 一 个 变量 。 例 如 ，myName=" 张 三 "的 作用 是 执行 一 次 赋值 操 
作 ， 即 把 常量 “ 张 三 ” 赋 值 给 变量 myName。 赋 值 运算 符 为 二 元 运算 符 ， 要 求 运算 符 两 侧 的 
操作 数 类 型 必须 一 致 。JavaScript 中 提供 的 简单 赋值 运算 符 和 复合 赋值 运算 符 ， 如 表 2-7 所 示 。 


表 2-7 赋值 运算 符 
运算 符 说 明 示 例 
= 将 右边 表达 式 的 值 赋 值 给 左边 的 变量 Usermame="Bill" 
二 = 将 运算 符 左边 的 变量 加 上 右边 表达 式 的 值 后 ， 赋 值 给 左边 的 变量 | at+=b /相当 于 a=atb 
-= 将 运算 符 左 边 的 变量 减 去 右边 表达 式 的 值 后 ， 赋 值 给 左边 的 变量 | a-=b /相当 于 a=a-b 
*= 将 运算 符 左边 的 变量 乘 以 右边 表达 式 的 值 后 ， 赋 值 给 左边 的 变量 | a*=b /相当 于 a=a*b 
在 将 运算 符 左 边 的 变量 除 以 右边 表达 式 的 值 后 ， 赋 值 给 左边 的 变量 | a/=b // 相 当 于 a=a/b 
将 运算 符 左边 的 变量 用 右边 表达 式 的 值 求 模 ， 并 将 结果 赋 给 左边 
%= a%=b /相当 于 a=a%b 
的 变量 
将 运算 符 左 边 的 变量 与 右边 表达 式 的 变量 进行 逻辑 与 运算 ， 将 结 
&= a&=b // 相 当 于 a=a&b 
果 赋 给 左边 的 变量 
将 运算 符 左边 的 变量 与 右边 表达 式 的 变量 进行 逻辑 或 运算 ， 将 结 
恒 al=b /相当 于 a=allb 
果 赋 给 左边 的 变量 
将 运算 符 左 边 的 变量 与 右边 表达 式 的 变量 进行 逻辑 异 或 运算 ,将 
A a^=b /相当 于 a=a^b 
结果 赋 给 左边 的 变量 


Ee 在 书写 复合 赋值 运算 符 时 ， 两 个 符号 之 间 一 定 不 能 有 空格 ， 否 则 将 会 出 错 。 


【 例 2.18】 (实例 文件 :ch02\2.18.html) 赋 值 运 算 符 的 使 用 。 


<!DOCTYPE html> 
<html> 
<body> 
<h3> 赋 值 运算 符 的 使 用 规则 </h3> 
<p><strong> 如 果 把 数字 与 字符 串 相 加 ， 结 果 将 成 为 字符 串 。</strong></P> 
<script type="text/javascript"> 
X=5+57 
document .write (x); 
document .write("<br />"); 
X="5"+"5"; 
document .write (x); 
document .write("<br />"); 
x=5+"5"; 
document .write (x); 
document .write ("<br />"); 
Eh 
document .write (x); 
document .write ("<br />"); 
</script> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-20 所 示 。 
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赋值 运算 符 的 使 用 规则 
”如 果 把 数字 与 字符 串 相 加 ， 结 果 将 成 为 字符 串 。 
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图 2-20 “程序 运行 结果 
2.4.7 ”案例 一 一 运算 符 优先 级 


运算 符 的 种 类 非常 多 ， 通 常 不 同 的 运算 符 又 构成 了 不 同 的 表达 式 ， 甚 至 一 个 表达 式 中 又 
包含 有 多 种 运算 符 ， 因 此 运算 符 的 运算 方法 有 一 定 的 规律 性 。JavaScript 语言 规定 了 各 类 运算 
符 的 运算 级 别 及 结合 性 等 ， 如 表 2-8 所 示 。 


全 
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案例 课 党 >… 
表 2-8 ”运算 符 优先 级 别 列表 
优先 级 (1 最 高 ) 说 明 运算 符 结合 性 
i 括号 从 左 到 右 
2 自 加 / 自 减 运算 符 从 右 到 左 
2 乘法 运算 符 、 除 法 运算 符 、 取 模 运 a 
算 符 
4 加 法 运算 符 、 减 法 运算 符 从 左 到 右 
5 小 于 、 小 于 等 于 、 大 于 、 大 于 等 于 从 左 到 右 
6 等 于 、 不 等 于 从 左 到 右 
7 逻辑 与 从 左 到 右 
8 逻辑 或 从 左 到 右 
9 赋值 运算 符 、%=、 一 从 右 到 左 


建议 在 书写 表达 式 的 时 候 ， 如 果 无 法 确定 运算 符 的 有 效 顺序 ， 则 应 尽量 采用 括号 来 保证 
运算 的 顺序 ， 这 样 也 使 得 程序 一 目 了 然 ， 而 且 自 己 在 编程 时 能 够 思路 清晰 。 
【 例 2.19】 (实例 文件 ，ch02\2.19.htmD 运 算 符 的 优先 级 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 运 算 符 的 优先 级 </title> 

</head> 

<body> 

<script language="javascript"> 
Var a=1+2*3; // 按 自动 优先 级 计算 
var b=(1+2)*3; // 使 用 () 改变 运算 优先 级 
alert ("a="+a+"\nb="+b); // 分 行 输 出 结果 

</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-21 所 示 。 


图 2-21 程序 运行 结果 


2.5 _ JavaScript 的 表达 式 


表达 式 是 一 个 语句 的 集合 ， 像 一 个 组 一 样 ， 其 计算 结果 是 一 个 单一 的 值 ， 且 该 结果 被 
JavaScript 归 入 下 列 数据 类 型 之 一 : 布尔 、 数 字 、 字 符 串 、 对 象 等 。 

一 个 表达 式 本 身 可 以 是 一 个 数字 或 者 变量 ， 或 者 它 可 以 包含 许多 连接 在 一 起 的 变量 关键 
字 以 及 运算 符 。 例 如 ， 表 达 式 xy， 分 别 使 自由 变量 x 和 y 定 值 为 10 和 5， 则 其 输出 为 数字 
2; 但 在 y 值 为 0 时 则 没有 定义 。 因 此 一 个 表达 式 的 赋值 和 算 符 的 定义 以 及 数值 的 定义 域 是 有 
关联 的 。 


2.5.1 案例 一 一 赋值 表达 式 


在 JavaScript 中 ， 赋 值 表达 式 的 一 般 语 法 形式 为 “变量 赋值 运算 符 表达 式 ”， 在 计算 中 
按照 自 右 而 左 结合 。 其 中 有 简单 的 赋值 表达 式 ， 例 如 “i=1”， 也 有 定义 变量 时 ， 给 变量 赋 初 
始 值 的 赋值 表达 式 ， 例 如 “var str="Happy World! ":” 还 有 使 用 比较 复杂 的 赋值 运算 符 连接 的 
赋值 表达 式 ， 例 如 “k+=18”。 

【 例 2.20】 (实例 文件 : ch02\2.20.html) 赋 值 表 达 式 的 用 法 。 


<!DOCTYPE html> 
<html> 
<head> 
<tit1le> 赋 值 表达 式 </title> 
<body> 
<script language="javascript"> 
二 和 = 二 
var x = 15; 
document .write ("<p> 目 前 变量 x 的 值 为 : x="+ x); 
X+=X-=X*X? 
document .write ("<p> 执 行 语句 “x+=x-=x*x” 后 ， 变 量 x 的 值 为 : x="+ x); 
var Y = 15; 
document .write ("<p> 目 前 变量 y 的 值 为 : y="+ y); 
Js 人 = 
document .write ("<p> 执 行 语句 “y+=(y-=y*y) ”后 ， 变 量 y 的 值 为 : y=" +y); 
ss 
</script> 
</body> 
</head> 
</html> 


在 上 述 代 码 中 ， 表 达 式 x+=x-=x*x 的 运算 流程 如 下 : 先 计 算 x=x-(x*x)， 得 到 x=-210， 
再 计算 x=x+(x-=x*x)， 得 到 x=-195。 同 理 ， 表 达 式 “y+=(y-=y*y)” 的 结果 为 x=-195， 如 
图 2-22 所 示 。 


a 


主导 出 车 1duoSeAer 一 一 薄 人 宰 访 duoSeAer 梳洗 者 Z 小 全 


IGG 


JavaScript 动 态 网 站 开发 
案例 课堂 四 


mo 0* | Swan 
HA WH EE KERA IRM NOM 


目前 变量 x 的 值 为 x=15 
执行 语句 “x+=x-=x*x” 后 


目前 变量 y 的 值 为 : 
执行 语句 “yt=(y-=y#y) ”后 ， 变 量 y 的 值 为 : y=-195 


2-22 ”程序 运行 结果 


5 由 于 运算 符 的 优先 级 规定 较 多 并 且 容易 混淆 ， 为 提高 程序 的 可 读 性 ， 在 使 用 


Ee 多 操作 符 进 行 运算 时 ， 尽 量 使 用 括号 () 来 保证 程序 的 正常 运行 。 


2.5.2 案例 一 一 算术 表达 式 


算术 表达 式 就 是 用 算术 运算 符 连 接 的 JavaScript 语句 。 例 如 itj+tk;、20-x;、a*b;、j/k;、 
sum%2; 等 即 为 合法 的 算术 运算 符 的 表达 式 。 算 术 运算 符 的 两 边 都 必须 是 数值 ， 若 在 “+” 运 
算 中 存在 字符 或 字符 串 ， 则 该 表达 式 将 是 字符 串 表 达 式 ， 因 为 JavaScript 会 自动 将 数值 型 数据 
转换 成 字符 串 型 数据 。 例 如 ， 表 达 式 "好 好 学 习 "+i+" 天 天 向 上 "+j; 将 被 看 作 是 字符 串 表 达 式 。 


2.5.3 ”案例 一 一 布尔 表达 式 


布尔 表达 式 一 般 用 来 判断 某 个 条 件 或 者 表达 式 是 否 成 立 ， 其 结果 只 能 为 true 或 false。 
【 例 2.21】 (实例 文件 :ch02\2.21.html) 布 尔 表 达 式 的 用 法 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 布 尔 表达 式 </title> 
<body> 
<script language="javascript" type="text/javascript"> 
到 
function checkYear () 
{ 
var txtYearobj = document.all.txtYear; // 文 本 框 对 象 
var txtYear = txtYearobj .value7 
if((txtYear == null) || (txtYear.length < 1)|| (txtYear < 0) 
{ // 文 本 框 值 为 空 
window-alert(" 请 在 文本 框 中 输入 正确 的 年 份 ! ") ; 
txtYearObj .focus () 
return; 
} 
if(isNaN (txtYear)) 
{ // 用 户 输入 不 是 数字 
window.alert ("年 份 必须 为 整 型 数字 ! ") ; 


txtYearObj .focus (); 
return; 
} 
if(isLeapYear (txtYear)) 
window.alert (txtYear + "年 是 闽 年 ! "); 
else 
window.alert (txtYear + "年 不 是 半年 ! "); 
function isLeapYear(yearVal) //* 判 断 是 否 半年 
if((yearVal % 100 == 0) && (yearVal % 400 == 0) ) 
return true; 
if(yearVal % 4 == 0) return true; 
return false; 


} 

> 

</script> 

<form action="#" name="frmYear"> 


请 输入 当前 年 份 : 


<input type="text" name="txtYear"> 


<p> 请 单 击 按钮 以 判断 是 否 为 闽 年 : 
<input type="button™" value=" 按 钮 " onclick="checkYear()"> 
</form> 
</body> 
</head> 
</html> 


在 上 述 代码 中 多 次 使 用 布尔 表达 式 进行 数值 的 判断 。 运 行 该 段 代 码 ， 在 显示 的 文本 框 中 
输入 2010， 单 击 【 按 钮 】 按 钮 后 ， 系 统 先 判断 文本 框 是 否 为 空 ， 再 判断 文本 框 输入 的 数值 是 
否 合法 ， 最 后 判断 其 是 否 为 国 年 并 弹出 相应 的 提示 框 ， 如 图 2-23 所 示 。 

同 理 ， 当 输入 值 为 2012 时 ， 具 体 的 显示 效果 则 如 图 2-24 所 示 。 
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2.5.4 ”案例 一 一 字符 串 表达 式 


字符 串 表 达 式 是 操作 字符 串 的 JavaScript 语句 。JavaScript 的 字符 串 表达 式 只 能 使 用 “+” 
与 “+=” 两 个 字符 串 运算 符 。 如 果 在 同一 个 表达 式 中 既 有 数字 又 有 字符 串 ， 同 时 还 没有 将 字 
符 串 转换 成 数字 的 方法 ， 则 返回 值 一 定 是 字符 串 型 。 
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【 例 2.22】〗】( 实 例文 件 : ch02\2.22 htmD 字 符 串 表达 式 的 用 法 。 


<!1DOCTYPE html> 
<html> 
<head> 
<title> 字 符 串 表达 式 </title> 
<body> 
<script language="javascript"> 
二 二 一 
var x = 107 
document .write ("<p> 目 前 变量 x 的 值 为 : x="+ x); 
X=1+4+87 
document .write ("<p> 执 行 语句 “x=1+4+8” 后 ， 变 量 x 的 值 为 : x="+ x); 
document .write ("<p> 此 时 ， 变 量 x 的 数据 类 型 为 : "+ (typeof x)); 
x=1+4+'8"'; 
document .write ("<p> 执 行 语句 “x=1+4+'8'” 后 ， 变 量 x 的 值 为 : x="+ x); 
document .write ("<p> 此 时 ， 变 量 x 的 数据 类 型 为 : "+ (typeof x)); 
/> 
</script> 
</body> 
</head> 
</html> 


运行 上 述 代 码 ， 对 于 一 般 表达 式 “1+4+8”， 将 三 者 相 加 ， 和 为 13; 而 在 表达 式 
“1+4+'8'” 中 ， 表 达 式 按照 从 左 至 右 的 运算 顺序 ， 先 计算 数值 1、4 的 和 ， 结 果 为 5; 再 将 之 
后 的 和 转换 成 字符 串 型 ， 与 最 后 的 字符 串 连 接 ; 最 后 得 到 的 结果 是 字符 串 “58”， 如 图 2-25 
所 示 。 
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目前 变量 z 的 值 为 ，x=10 

执行 语句 “x=1-4=8” 后 ， 交 量 x 的 值 为 ，x=13 
此 时 ， 变 量 * 的 数据 类 型 为 : nurber 

执行 语句 “x=1~4*"8' ”后 ， 变 量 x 的 值 为 ，x=58 
此 时 ， 变 量 x 的 数据 类 型 为 ，string 


图 2-25 程序 运行 结果 
2.5.5 ”案例 一 一 类 型 转换 


相对 于 强 类 型 语言 ，JavaScript 的 变量 没有 预定 类 型 ， 其 类 型 取决 于 包含 值 的 类 型 。 当 对 
不 同类 型 的 值 进行 运算 时 ，JavaScript 解释 器 将 自动 把 数据 类 型 逐一 改变 (强制 转换 ) 为 另 一 种 
数据 类 型 ， 再 执行 相应 的 运算 。 除 自动 类 型 转换 外 ， 为 避免 自动 转换 或 不 转换 产生 的 不 良 后 
果 ， 有 时 需要 手动 进行 显 式 的 类 型 转换 ， 此 时 可 利用 JavaScript 提供 的 进行 类 型 转换 的 工具 ， 
例如 parseInt0 方 法 和 parseFloat0 方 法 等 。 


【 例 2.23】( 实 例文 件 ，ch02\2.23.html) 字 符 串 型 转换 为 逻辑 型 数据 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 类 型 转换 </title> 
<body> 
<script language="javascript"> 
i 
var x = "happy"; // x 值 为 非 空 字符 串 
1f£ (x) 
{ 
alert ("字符 串 型 变量 x 转换 为 逻辑 型 后 ， 结 果 为 true") ; 
} 


else 


{ 
alert ("字符 串 型 变量 x 转换 为 逻辑 型 后 ， 结 果 为 false") 7 
} 
We 
</script> 
</body> 
</head> 
</html> 


上 述 代 码 运行 结果 如 图 2-26 所 示 。 对 于 非 空 字符 串 变量 x， 按 照 数据 类 型 转换 规则 ， 自 
动 转换 为 逻辑 型 后 结果 为 tue。 
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图 2-26 程序 运行 结果 


2.6 ”实战 演练 一 一 局 部 变量 和 全 局 变量 的 优先 级 


在 函数 内 部 ， 局 部 变量 的 优先 级 高 于 同名 的 全 局 变量 。 也 就 是 说 ， 如 果 存 在 与 全 局 变量 
名 称 相同 的 局 部 变量 ， 或 者 在 函数 内 部 声明 了 与 全 局 变量 同名 的 参数 ， 则 该 全 局 变量 将 不 再 
起 作用 。 

【 例 2.24】 (实例 文件 : ch02\2.24.html) 变 量 的 优先 级 。 


<!DOCTYPE html> 
<html> 

<head> 
<title> 变 量 的 优先 级 </title> 
<body> 

<script language="javascript"> 
全 
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var scope=" 全 局 变量 "; // 声 明 一 个 全 局 变量 
function checkscope() 
. 
var scope=" 局 部 变量 "; // 声 明 一 个 同名 的 局 部 变量 
document .write (scope); // 使 用 的 是 局 部 变量 ， 而 不 是 全 局 变量 
} 
checkscope () ; // 调 用 函数 ， 输 出 结果 
/> 
</script> 
</body> 
</head> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 2-27 所 示 。 
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图 2-27 程序 运行 结果 


2 虽然 在 全 局 作用 域 中 可 以 不 使 用 var 声明 变量 ， 但 声明 局 部 变量 时 ， 一 定 要 使 
i 用 var 语句 。 


JavaScript 没有 块 级 作用 域 ， 函 数 中 的 所 有 变量 无 论 是 在 哪里 声明 的 ， 在 整个 函数 中 都 有 
【 例 2.25】( 实 例文 件 ，ch02\2.25.html)JavaScript 无 块 级 作用 域 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 变 量 的 优先 级 </title> 

<body> 

<script language="javascript"> 

<!-- 
var scope=" 全 局 变量 "; // 声 明 一 个 全 局 变量 
function checkscope () 


{ 


alert (scope); // 调 用 局 部 变量 ， 将 显示 “undefined” 而 不 是 “局 部 变量 ” 
var scope=" 局 部 变量 "; // 声 明 一 个 同名 的 局 部 变量 
alert (scope); // 使 用 的 是 局 部 变量 ， 将 显示 “局 部 变量 ” 
} 
checkscope (); // 调 用 函数 ， 输 出 结果 
= 
</script> 


</body> 
</head> 
</html> 


上 述 代码 程序 运行 结果 如 图 2-28 所 示 。 单 击 【 确 定 】 按 钮 ， 弹 出 如 图 2-29 所 示 的 结果 。 


图 2-28 程序 运行 结果 图 2-29 程序 运行 结果 
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在 例 2-25 中 ， 用 户 可 能 认为 因为 声明 局 部 变量 的 var 语句 还 没有 被 执行 而 调用 全 局 变量 
scope， 但 由 于 “无 块 级 作用 域 ” 的 限制 ， 局 部 变量 在 整个 函数 体内 是 有 定义 的 。 这 就 意味 着 
在 整个 函数 体 中 都 隐藏 了 同名 的 全 局 变量 ， 因 此 ， 输 出 的 并 不 是 “全 局 变量 ”。 虽 然 局 部 变 
量 在 整个 函数 体内 都 是 有 定义 的 ， 但 在 执行 var 语句 之 前 不 会 被 初始 化 。 


2.7 ” 跟 我 练 练 手 


1. 练习 目标 

能 够 熟练 掌握 本 章 所 讲 内容 。 

2. 上 机 练习 

练习 1: JavaScript 基本 语法 的 使 用 。 
练习 2: JavaScript 数据 结构 的 使 用 。 
练习 3: JavaScript 数据 类 型 的 使 用 。 


练习 4: JavaScript 运算 符 的 使 用 。 
练习 5: JavaScript 表达 式 的 使 用 。 


2.8 高 手 甜 点 


甜点 1: 变量 名 有 哪些 命名 规则 ? 

变量 名 以 字母 、 下 划 线 或 美元 符号 ($) 开 头 。 例 如 ，txtName 与 _txtName 都 是 合法 的 变 
量 名 ， 而 1txtName 和 &txtName 都 是 非法 的 变量 名 。@ 变 量 名 只 能 由 字母 、 数 字 、 下 划 线 和 
美元 符号 ($) 组 成 ， 其 中 不 能 包含 标点 ， 且 运算 符 不 能 用 汉字 做 变量 名 。 例 如 ，txt%Name、 名 
称 文本 、txt-Name 都 是 非法 变量 名 。@ 不 能 用 JavaScript 保留 字 做 变量 名 。 例 如 ，var、 


‘@ 
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enum、const 都 是 非法 变量 名 。 @JavaScript 对 大 小 写 敏感 。 例 如 ， 变 量 txtName 与 txtname 是 
两 个 不 同 的 变量 ， 两 个 变量 不 能 混用 。 


甜点 2: 声明 变量 具有 哪 几 种 规则 ? 


可 以 使 用 一 个 关键 字 var 同时 声明 多 个 变量 ， 例 如 语句 “var xy:” 就 同时 声明 了 x 和 y 
两 个 变量 。 可 以 在 声明 变量 的 同时 对 其 赋值 ( 称 为 初始 化 )， 例 如 “var president = "henan";var 
x=5,y=12;” 声 明了 3 个 变量 president、x 和 y， 并 分 别 对 其 进行 了 初始 化 。 如 果 出 现 重复 声明 
的 变量 ， 且 该 变量 已 有 一 个 初始 值 ， 则 此 时 的 声明 相当 于 对 变量 的 重新 赋值 。 如 果 只 是 声明 
了 变量 ， 并 未 对 其 赋值 ， 其 值 默认 为 undefined。var 语句 可 以 用 作 for 循环 和 for/in 循环 的 一 
部 分 ， 这 样 可 使 得 循环 变量 的 声明 成 为 循环 语法 自身 的 一 部 分 ， 使 用 起 来 较为 方便 。 

甜点 3: 比较 运算 符 “==” 与 赋值 运算 符 “=” 的 不 同 之 处 在 于 什么 地 方 ? 

在 各 种 运算 符 中 ， 比 较 运 算 符 “一 ”与 赋值 运算 符 “=” 完 全 不 同 。 运 算 符 “=” 是 用 于 
给 操作 数 赋值 ， 而 比较 运算 符 “==” 则 是 用 于 比较 两 个 操作 数 的 值 是 否 相等 。 如 果 在 需要 比 


较 两 个 表达 式 的 值 是 否 相 等 的 情况 下 ， 错 误 地 使 用 赋值 运算 符 “=”， 则 会 将 右 操作 数 的 值 赋 
给 左 操作 数 。 


名 
语句 、 


包括 while 
ript 的 程序 控制 结构 与 相关 


break 来 完成 。 其 中 ， 条 件 判 断 按 预先 设 定 的 条 件 执行 程序 ， 包 括 让 语 
语句 ; 而 循环 控制 语句 则 可 以 重复 完成 任务 ， i 


JavaScript 编程 中 对 程序 流程 的 控制 主要 通过 条 件 判 断 、 循 环 控制 语句 及 
“do. . . while” 语句 及 for 语句 。 本 章 将 主要 讲述 JavaSc 
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3.1 基本 处 理 流 程 


对 数据 结构 的 处 理 流 程 ， 称 为 基本 处 理 流程 。 在 JavaScript 中 ， 基 本 处 理 流程 包含 3 种 结 
构 ， 即 顺序 结构 、 选 择 结构 和 循环 结构 。 

顺序 结构 是 JavaScript 脚本 程序 中 最 基本 的 结构 ， 它 按照 语句 出 现 的 先后 顺序 依次 执行 ， 
如 图 3-1 所 示 。 

选择 结构 按照 给 定 的 逻辑 条 件 来 决定 执行 顺序 ， 有 单 向 选择 、 双 向 选择 和 多 向 选择 之 
分 ， 但 程序 在 执行 过 程 中 都 只 执行 其 中 一 条 分 支 。 单 向 选择 和 双向 选择 结构 如 图 3-2 所 示 。 


图 3-1 顺序 结构 图 3-2 单 向 选择 和 双向 选择 结构 


循环 结构 即 根据 代码 的 逻辑 条 件 来 判断 是 否 重复 执行 某 一 段 程序 ， 若 逻辑 条 件 为 true， 
则 进入 循环 重复 执行 ， 否 则 结束 循环 。 循 环 结构 可 分 为 条 件 循环 和 计数 循环 ， 如 图 3-3 所 示 。 


3-3 ”循环 结构 


一 般 而 言 ， 在 JavaScript 脚本 语言 中 ， 程 序 总 体 是 按照 顺序 结构 执行 的 ， 而 在 顺序 结构 中 
又 可 以 嵌入 选择 结构 和 循环 结构 。 


3.2 赋值 语句 


赋值 语句 是 JavaScript 程序 中 最 常用 的 语句 。 在 程序 中 ， 往 往 需 要 大 量 的 变量 来 存储 程序 


@s 

第 遇 

中 用 到 的 数据 ， 所 以 用 来 对 变量 进行 赋值 的 赋值 语句 也 会 在 程序 中 大 量 出 现 。 赋 值 语句 的 语 辣 
法 格式 如 下 : 到 
变 可 量 名 = 表达 式 加 

当 使 用 关键 字 var 声明 变量 时 ， 可 以 同时 使 用 赋值 语句 对 声明 的 变量 进行 赋值 。 例 如 ， 型 
声明 一 些 变量 ， 并 分 别 给 这 些 变量 赋值 ， 代 码 如 下 : 名 
Var username="Rose" 向 

Var bue=true 

var variable=" 开 怀 大 笑 ， 益 寿 延 年 " 程 

序 

i 、 控 

3.3 条 件 判断 语句 划 

构 

条 件 判断 语句 是 对 语句 中 不 同 条 件 的 值 进行 判断 ， 进 而 根据 不 同 的 条 件 执行 不 同 的 语 时 


句 。 条 件 判 断 语句 主要 包括 两 大 类 ， 分 别 是 让 判断 语句 和 switch 多 分 支 语句 。 
3.3.1 “案例 一 一 if 语句 


让 语句 是 使 用 最 为 普遍 的 条 件 选择 语句 。 每 一 种 编程 语言 都 有 一 种 或 多 种 形式 的 if 语 
句 ， 在 编程 中 它 经 常 被 用 到 。 

下 语句 的 格式 如 下 : 

if (条 件 语句 ) 

. 


执行 语句 ; 

} 

其 中 ，“ 条 件 语句 ”可 以 是 任何 一 种 逻辑 表达 式 。 如 果 “ 条 件 语句 ”的 返回 结果 为 
true， 则 程序 先 执行 后 面 大 括号 人 中 的 “执行 语句 ”， 然 后 执行 它 后 面 的 其 他 语句 。 如 果 “ 条 
件 语句 ”的 返回 结果 为 false， 则 程序 跳 过 “条 件 语句 ”后 面 的 “执行 语句 ”， 直 接 去 执行 程 
序 后 面 的 其 他 语句 。 大 括号 的 作用 就 是 将 多 条 语句 组 合成 一 个 复合 语句 ， 作 为 一 个 整体 来 处 
理 。 如 果 大 括号 中 只 有 一 条 语句 ， 那 么 这 对 大 括号 弛 就 可 以 省 略 。 

【 例 3.1】( 实 例文 件 ，ch03\3.1.htmDif 语句 的 使 用 。 


<!DOCTYPE html> 

<html> 

<body> 

<p> 如 果 时 间 早 于 20 :00， 会 获得 问候 "Good day"。</p> 
<button onclick="myFunction() "> 点 击 这 里 </button> 
<p id="demo"></p> 

<script type="text/javascript"> 

function myFunction() 


IGG 


Var x=""; 
Var time=new Date() .getHours ()7 
if (time<20) 

{ 
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X="Good day™; 
和 
document .getElementById ("demo") .innerHTML=x; 
} 
</script> 
</body> 
</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 3-4 所 示 。 单 击 页 面 中 的 【点 击 这 里 】 按 
钮 ， 可 以 看 到 按钮 下 方 显示 出 “Good day” 问 候 语 ， 如 图 3-5 所 示 。 


| Havsersadminist P ~ OX | HAsersaoministr., 
文中 站 得 日 “二 看 | 尿 雪 夫 和 A 工具 大 冯 (H] 


辣 Hhuzerawamiist P - Gx] 名 usersadminise. 
EE TE UE 

如 音 时 间 早 于 20:00， 会 获得 问 避 "Cood day”。 

后生 过 时 FE 


Goo0d day 


如 果 时 间 早 于 20:00， 会 获得 问候 “Good day”。 


图 3-4 “程序 运行 结果 图 3-5 程序 运行 结果 

3 请 使 用 小 写 的 让 ， 如 果 使 用 大 写字 母 (IF) 则 会 生成 JavaScript 错误 。 另外， 在 

证 这 个 语法 中 ， 没 有 else， 因 此 ， 用 户 已 经 告诉 浏览 器 只 有 在 指定 条 件 为 true 时 才 执 
行 代码 。 


3.3.2 ”案例 一 一 “if...else” 语 句 


“if...else” 语 句 通常 用 于 一 个 条 件 需要 两 个 程序 分 支 来 执行 的 情况 。“ 让 ...else ”语句 语 
法 格式 如 下 所 示 。 


if (条 件 ) 
| 
当 条 件 为 true 时 执行 的 代码 
’ 

臣下 5 


{ 
当 条 件 不 为 true 时 执行 的 代码 
} 


如 果 在 该 格式 这 从 名 后面 再 添加 一 个 else 从 句 ， 当 条 件 语 句 返 回 结果 为 false 时 ， 那 么 程 


序 将 执行 else 后 面 的 从 句 。 
【 例 3.2】 (实例 文件 ，ch03\3.2.html)“if...else” 语 句 的 使 用 。 
<html> 
<head> 


<script type="text/javascript"> 
Var a="john"; 
if(a!="john") 
{ 
document .write ("<hl style='text-align:center;color:red;'> 欢 


迎 JOHN 光临 </h1>"); 


i 
elsef{ 


document .write("<p style='font-size:15px;font— 
weight :bolder;color:blue'> 请 重新 输入 名 称 </p>") ; 


</script> 
</head> 
<body> 
</body> 
</html> 


上 述 代 码 中 使 用 了 “让 ...else” 语 句 ， 对 变量 a 的 值 进行 判断 ， 如 果 a 值 不 等 于 “john” 
则 输出 红色 标题 ， 否 则 输出 蓝 色 信息 。 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 3-6 所 示 ， 可 以 看 到 网 页 输出 了 蓝 色 信息 
“请 重新 输入 名 称 ”。 


I [vsersvaminist Pp - © x |B ruseraaminisr,. | 
Er 履 生 区 A， 工具 大) 


| 请 重新 给 入 名 称 


图 3-6 “if...else” 语 句 判断 
3.3.3 ”案例 一 一 “if...else if” 语 句 


使 用 “if...else if” 语 句 来 选择 多 个 代码 块 之 一 来 执行 。“if.….else if” 语 句 的 语法 格式 
如 下 : 
EE 


‘ 
当 条 件 1 为 true 时 执行 的 代码 
} 

else if (条 件 2) 


I 
当 条 件 2 为 true 时 执行 的 代码 
} 


else 


{ 
当 条 件 1 和 条 件 2 都 不 为 true 时 执行 的 代码 
} 


【 例 3.3】 (实例 文件 ，ch03\3.3.html) 使 用 “让 ...else if” 语 句 输出 问候 语 。 


<!DOCTYPE html> 

<html> 

<body> 

<p> if...else if 语句 的 使 用 </p> 
<script type="text/javascript"> 
var d = new Date() 

var time = d.getHours() 


对 注 厢 圭 瞧 址 山洞 前 


ss®@ 
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if (time<10}){ 
document .write("<b>Good morning</b>")} 
else if (time>=10 && time<16) 
{document .write ("<b>Good day</b>") } 
else{document .write("<b>Hello World!</b>")} 
</scripE> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 3-7 所 示 。 


目 HUserswAdminis PD - © X | @ HUsersAdministr.. x 
文件 月 炮台 (E 可 看 (V) 收藏 闪 A)。 工具 [0 帮助 (H) 


还 .else 过 理 句 的 使 用 


Hello World! 


3-7 “if...else if” 语 句 判断 结果 


3.3.4 ”案例 一 一 if 语句 的 嵌 套 


站 语句 可 以 嵌 套 使 用 。 当 if 语句 的 从 句 部 分 (大 括号 中 的 部 分 ) 是 另外 一 个 完整 的 让 语句 
时 ， 外 层 计 语句 的 们 部 分 的 从 名 内容 可 以 省 略 。 但 是 ， 在 使 用 if 语句 的 嵌 套 应 用 时 ， 最 好 使 
用 好 来 确定 层次 关系 。 和 否则 ， 由 于 使 用 弛 的 位 置 不 同 ， 可 能 会 导致 程序 代码 的 含义 不 同 ， 从 
而 输出 不 同 的 结果 。 例 如 下 面 的 两 个 实例 ， 由 于 位置 的 不 同 ， 导 致 输出 结果 不 同 。 

【 例 3.4】 (实例 文件 ，ch03\3.4.htmDif 语句 的 嵌 套 。 


<!DOCTYPE html> 
<html> 
<body> 
<script type="text/javascript"> 
var x=20;y=x; //x、y 值 都 为 20 
if (x<1) //z 为 20， 不 满足 此 条 件 ， 故 其 下 面 的 代码 不 会 被 执行 
{ 
if (y==5) 
alert ("X<1&&Y==5") 7 
else 
alert ("x<l&&y!==5"); 
} 


else if(x>15) //z 满足 条 件 ， 继 续 执 行 下 面 的 语句 
i 
if (y==5) //Y 为 20， 不 满足 此 条 件 ， 故 其 下 面 的 代码 不 会 被 执行 
alert ("X>15&&Y==5") 7 
else //Y 满足 条 件 ， 继 续 执行 下 面 的 语句 
alert ("x>15&&y!==5"); // 这 里 是 程序 输出 的 结果 
} 
</script> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 3-8 所 示 。 


【 例 3.5】 (实例 文件 : ch03\3.5.htmD 调 整 嵌 套 语句 中 他 的 位 置 。 


<!DOCTYPE html> 
<html> 
<body> 


<script type="text/javascript"> 


Var x=20;y=x; 
if (x<1) 
t 
f(y==95) 
alert ("x<l&&y==5"); 
else 
alert ("x<l&&y!==5"); 
} 
else if(x>15) 
上 
2E(Yy—=S) 
alert ("X>15&&Y==5") 7 
} 
else 
alert ("x>50&&y!==1"); 
</script> 
</body> 
</html> 


运行 该 程序 ， 则 不 会 出 现任 何 结果 ， 如 图 3-9 所 示 。 可 以 看 出 ， 由 于 使 用 f} 的 位 置 不 


a 


sxsme 二 时 国 
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过 谭 朵 间 器 悍 撒 对 出 
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//x、y 值 都 为 20 
//zx 为 20， 不 满足 此 条 件 ， 故 其 下 面 的 代码 不 会 被 执行 


//z 满足 条 件 ， 继 续 执行 下 面 的 语句 
//Y 为 20, 不 满足 此 条 件 ， 故 其 下 面 的 代码 不 会 被 执行 


//x 已 满足 前 面 的 条 件 ， 这 里 的 语句 不 会 被 执行 
// 由 于 没有 满足 的 条 件 ， 故 没有 可 执行 的 语句 ， 也 就 没有 输出 结果 


同 ， 造 成 程序 代码 的 含义 完全 不 同 。 因 此 ， 在 嵌 套 使 用 时 ， 最 好 使 用 峡 对 程序 代码 的 层次 关 


系 进行 界定 。 


3-9 ”程序 运行 结果 


3.3.5 “案例 一 一 switch 语句 | 


switch 选择 语句 用 于 将 一 个 表达 式 的 结果 同 多 个 值 进行 比较 ， 并 根据 比较 结果 选择 执行 


se®@ 
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语句 。switch 语句 的 语法 格式 如 下 : 


switch (表达 式 ) 
{ 
case 取 值 1 : 
语句 块 1; break; 
case 取 值 2 : 
语句 块 2; break; 


case 取 值 n; 
语句 块 n;break; 
default : 
语句 块 n+1; 


case 语句 只 是 相当 于 定义 一 个 标记 位 置 ， 程 序 根据 switch 条 件 表达 式 的 结果 ， 直 接 跳 转 
到 第 一 个 匹配 的 标记 位 置 处 ， 开 始 顺序 执行 后 面 的 所 有 程序 代码 ， 包 括 后 面 的 其 他 case 语句 
下 的 代码 ， 直 到 碰 到 break 语句 或 函数 返回 语句 为 止 。default 语句 是 可 选 的 ， 它 匹配 上 面 所 有 
case 语句 定义 的 值 以 外 的 其 他 值 ， 也 就 是 前 面 所 有 取 值 都 不 满足 时 ， 就 执行 default 后 面 的 语 
句 块 。 

【 例 3.6】 (实例 文件 :ch03\3.6.html) 应 用 switch 语句 判断 当前 是 星期 几 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 应 用 switch 判断 当前 是 星期 几 </title> 
<script language="javascript"> 
Var now=new Date(); // 获 取 系统 日 期 
var day=now.getDay (); / /获取 星期 
var week; 
Switch (day){ 
case 1: 
week=" 星 期 一 "; 
break; 
case 2: 
week=" 星 期 二 "; 
break; 
case 3: 
week=" 星 期 三 "; 
break; 
case 4: 
week=" 星 期 四 "; 
break; 
Case 5: 
week=" 星 期 五 "; 
break; 
Case 6: 
week=" 星 期 六 "; 
break; 
default: 
week=" 星 期 日 "; 


break; 


@s 
document .write ("今天 是 "+week); // 输 出 中 文 的 星期 
</script> 融 
</head> 
<body> 琉 
</body> 程 
</html> 网 
上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 3-10 所 示 。 可 以 看 到 在 页 面 中 显示 了 当前 是 。 第 

星期 几 。 向 
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图 3-10 程序 运行 结果 NN 


Dr 在 程序 开发 的 过 程 中 ， 要 根据 实际 情况 选择 使 用 让 语句 和 switch 语句 ， 不 要 

半 因为 switch 语句 的 效率 高 而 一 味 地 使 用 它 ， 也 不 要 因为 这 语句 常用 而 不 使 用 
switch 语句 。 一 般 情况 下 ， 对 于 判断 条 件 较 少 的 程序 可 以 使 用 if 语句 ， 在 实现 一 
些 多 条 件 判断 的 程序 中 ， 应 该 使 用 switch 语句 。 


3.4 ”循环 控制 语句 


顾名思义 ， 循 环 语句 就 是 在 满足 条 件 的 情况 下 反复 执行 某 个 操作 的 语句 。 循 环 控制 语句 
主要 包括 while 语句 、“do...while” 语 句 和 for 语句 。 


3.4.1 案例 一 一 while 语句 


while 语句 既是 循环 语句 ， 也 是 条 件 判断 语句 。while 语句 的 语法 格式 如 下 : 

while (条 件 表达 式 语句 ) 

{ 

执行 语句 块 

} 

当 “ 条 件 表达 式 语句 ”的 返回 值 为 tue 时 ， 则 执行 们 中 的 语句 块 ， 当 执行 完 f} 中 的 语句 
块 后 ， 再 次 检测 条 件 表达 式 的 返回 值 ， 如 果 返 回 值 还 为 rue， 则 重复 执行 们 中 的 语句 块 ， 直 到 
返回 值 为 false 时 ， 结 束 整个 循环 过 程 ， 接 着 执行 while 代码 段 后 面 的 程序 代码 。 

【 例 3.7】 (实例 文件 ，ch03\3.7.htmD 计 算 1 一 100 之 间 所 有 整数 的 和 。 


<!DOCTYPE html> 
<html> 
<head> 


JavaScript 动 态 网 站 开发 
案例 课堂 由 


<title>while 语句 的 使 用 </title> 
</head> 
<body> 
<script type="text/javascript"> 
Var i=0; 
Var iSum=07 
while (i<=100) 
{ 
iSsumt+=i; 
了 + 十 
} 
document .write ("1~100 的 所 有 数 之 和 为 "+isum) 7 
</script> 
</body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 3-11 所 示 。 


< EEC G 
合 while 本 问 的 使 用 


文件 (有 妨 强 (和 各 看 (V) 收藏 交 (A) 工具 (T) 帮助 (+ ” 


1~100 的 所 有 数 之 和 为 3050 


图 3-11 程序 运行 结果 
使 用 while 语句 时 应 注意 以 下 事项 。 
e ”应 使 用 0 包含 多 条 语句 (一 条 语句 最 好 也 用 {})。 
e ”在 循环 体 中 应 包含 使 循环 退出 的 语句 ， 例 如 上 例 的 it+( 否 则 循环 将 无 休止 的 运行 )。 


e ”注意 循环 体 中 语句 的 顺序 ， 例 如 上 例 中 如 果 改 变 了 “iSum+=i; ”与 “i++:” 语 句 的 顺 
序 ， 结 果 将 完全 不 一 样 。 


全 > 不 要 忘记 增加 条 件 中 所 用 变量 的 值 ， 如 果 不 增加 变量 的 值 ， 该 循环 永远 不 会 
省 站 来， 可 能 会 导 到 浏览 器 衣 渍 。 


3.4.2 ”案例 一 一 “do...while” 语 句 


“do...while” 语 句 的 功能 和 while 语句 差不多 ， 只 不 过 它 是 在 执行 完 第 一 次 循环 之 后 才 
检测 条 件 表达 式 的 值 ， 这 意味 着 包含 在 {中 的 代码 块 至 少 要 被 执行 一 次 。 另 外 ， 
“do...while” 语 句 结尾 处 的 while 条 件 语句 的 括号 后 有 一 个 分 号 “:;”， 该 分 号 一 定 不 能 
省 略 。 

“do...while” 语 句 的 语法 格式 如 下 : 

do 

{ 

执行 语 

}while a 


a 


【 例 3.8】 (实例 文件 ，ch03\3.8.htmD 计 算 1 一 100 之 间 所 有 整数 的 和 。 


<!DOCTYPE html> 
<html> 
<head> 
<title>Javascript do.. .while 语句 示例 </title> 
</head> 
<body> 
<script type="text/javascript"> 
var i=0; 
var iSum=0; 
do 
{ 
iSumt+=i;} 
i++3 
}while (i<=100) 
document .write ("1-100 的 所 有 数 之 和 为 "+isum) ; 
</script> 
</body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 3-12 所 示 。 
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HUsersAadminist OD = © X | BJavascrip: do..while.. x 
文件 (有) 妨 洛 (E) “天 看 fV) 软 项 实 (A) 工具 (T) 。 格 助 (H) 


1-100 的 所 有 数 之 和 为 5050 


图 3-12 程序 运行 结果 
由 实例 可 知 ，while 与 “do...while” 的 区 别 如 下 。 
(1) “do...while” 将 先 执行 一 遍 弛 中 的 语句 ， 再 判断 表达 式 的 真 假 。 这 是 它 与 while 的 
本 质 区 别 。 
(2) “do...while” 与 while 是 可 以 互相 转化 的 。 
如 果 上 面 例子 中 i 的 初始 值 大 于 100，iSum 的 值 将 与 示例 的 结果 不 同 ， 这 是 因为 
“do...while” 语 句 先 执行 了 循环 体 中 语句 的 缘故 。 


3.4.3 ”案例 一 一 for 循环 语句 


for 语句 通常 由 两 部 分 组 成 ， 一 部 分 的 条 件 控制 部 分 ， 另 一 部 分 为 循环 部 分 。for 语句 的 
语法 格式 如 下 : 
for (初始 化 表达 式 ; 循环 条 件 表达 式 ; 循环 后 的 操作 表达 式 ) 
{ 
执行 语句 块 
} 
在 使 用 for 循环 语句 前 要 先 设 定 一 个 计数 器 变量 ， 该 变量 可 以 在 for 循环 之 前 预先 定义 ， 


JavaScript 动 态 网 站 开发 
案例 课堂 »… 


也 可 以 在 使 用 时 直接 进行 定义 。 在 上 述 语法 格式 中 ，“ 初 始 化 表达 式 ” 表 示 计 数 器 变量 的 初 
始 值 ; “循环 条 件 表达 式 ” 是 一 个 计数 器 变量 的 表达 式 ， 决 定 了 计数 器 的 最 大 值 ; “循环 后 
的 操作 表达 式 ” 表 示 循 环 的 步 长 ， 也 就 是 每 循环 一 次 ， 计 数 器 变量 值 的 变化 ， 该 变化 可 以 是 
增 大 的 ， 也 可 以 是 减 小 的 ， 或 进行 其 他 运算 。for 循环 语句 可 以 嵌 套 使 用 ， 也 就 是 在 一 个 循环 
里 还 可 以 有 另 一 个 循环 。 

【 例 3.9】 (实例 文件 ，ch03\3.9.html)for 循环 语句 的 使 用 。 


<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
forl(var i=0;i<5;i++){ 
document .write("<p style='font-size:"+i+"0px'> 欢 迎 学 习 
javascript</p>"); 


</script> 
</head> 
<body> 
</body> 
</html> 


上 述 代码 使 用 for 循环 输出 了 字号 大 小 不 同 的 语句 ， 在 正 9.0 浏览 器 中 的 显示 效果 如 图 3-13 


司 HAuserswdmirin DP - OX 
文件 月” 汕 溉 全 。 到 要 (V| 妆 达 失信 工具 Mm 中卫 (H| 


joe 


欢迎 学 习 javascript 


欢迎 学 习 javascript 


欢迎 学 习 javascript 


图 3-13 for 循环 语句 运行 结果 
3.5 跳 转 语句 


JavaScript 支持 的 跳 转 语句 主要 有 continue 语句 和 break 语句 。continue 语句 与 break 语句 
的 主要 区 别 是 : break 是 彻底 结束 循环 ;而 continue 是 结束 本 次 循环 。 


3.5.1 案例 一 一 break 语句 


break 语句 用 于 退出 包含 在 最 内 层 的 循环 或 者 退出 一 个 switch 语句 。break 语句 通常 用 在 
for、while、“do...while” 或 switch 语句 当中 。break 语句 的 语法 格式 如 下 : 


break; 


【 例 3.10】 (实例 文件 :ch03\3.10.html)break 语句 的 使 用 。 
在 Ihave a dream 字符 串 中 找到 第 一 个 d 的 位 置 。 


<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
Var sUrl = "I have a dream"; 
Var iLength = sUrl.length; 
Var iPos = 0; 


} 
} 
document .write (" 字 符 串 "+sUrl+" 中 的 第 一 个 a 字母 的 位 置 为 "+iPos) ; 
</script> 

</head> 
<body> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 3-14 所 示 。 


for (Var i=0;i<iLength;i++) bE 
上 序 
if(sUrl.charat (i)=="d") // 判 断 表 达 式 2 所 
iPos=i+1; 和 

break; sy 
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名 


Cs 加 日 huservdannia p = cx| 全 husersvdminisr。 x 
文件 (有 ”自强 (E) 下 看 (V) 。 收 茂 闪 (A) 工具 TT) 。 帮助 (H) 
字符 串 I have a dream 中 的 第 一 个 d 字 母 的 位 置 为 10 


图 3-14 ”break 语句 运行 结果 
3.5.2 ”案例 一 一 continue 语句 


continue 语句 和 break 语句 类 似 ， 不 同 之 处 在 于 ，continue 语句 用 于 中 止 本 次 循环 ， 并 开 
始 下 一 次 循环 ， 其 语法 格式 如 下 : 


continue; 

mm 1 

站 注 continue 语句 只 能 用 在 while、for、“do...while” 和 switch 语句 当中 。 
意 


【 例 3.11】 (实例 文件 :ch03\3.10.html)continue 语句 的 使 用 。 
打印 出 Ihave a dream 字符 串 中 小 于 字母 d 的 字符 。 


<!DOCTYPE html> 


o® 
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<html> 
<head> 
<script type="text/javascript"> 
Var sUrl = "i have a dream"; 
Var iLength = sUrl.length; 
var iCount = 0; 
for(var i=0;i<iLength;i++) 


if (sUrl.charAt (i)>="d") // 判 断 表 达 式 2 
{ 
continue; 
} 
document -write (SUF1.charRt (i)); 
} 
</script> 
</head> 
\、 <body> 
. </body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 3-15 所 示 。 


和 HAUserswdminist PD ~ © X ‖ @ HUsersAdministr.. x 


文件 中。 史 狂 (E) 于 看 (V) 。 改 刘 交 (A) 工具 TT) 帮助 (H) 


aaa 


图 3-15 ”Continue 语句 运行 结果 
3.6 ”案例 一 一 使 用 对 话 框 


在 JavaScript 中 有 提示 、 确 认 和 输入 3 种 对 话 框 ， 分 别 对 应 的 函数 是 : alert、confirm 和 
Prompt。 

(1) alert: 该 对 话 框 只 用 于 提醒 ， 不 能 对 脚本 产生 任何 改变 。 它 只 有 一 个 参数 ， 即 显示 
需要 提示 的 信息 ， 没 有 返回 值 。 

(2) confirm: 该 对 话 框 一 般 用 于 确认 信息 。 它 只 有 一 个 参数 ， 返 回 值 为 true 或 者 false。 

(3) prompt: 该 对 话 框 可 以 进行 输入 ， 并 返回 用 户 输入 的 字符 串 。 它 有 两 个 参数 ， 第 一 
个 参数 显示 提示 信息 ， 第 二 个 参数 用 于 显示 输入 框 (和 默认 值 )。 

【 例 3.12】 (实例 文件 : ch03\3.11.htmD3 种 对 话 框 的 使 用 方法 。 


<!DOCTYPE html> 

<head> 

<title> 三 种 弹出 对 话 框 的 用 法 实例 </title> 
<script language="javascript"> 
function ale() 


{// 弹 出 一 个 提醒 的 对 话 框 


alert ("呵呵 ， 演 示 一 完毕 ") ; 

3 

function firm() 

{// 利 用 对 话 框 返回 true 或 者 false 
if(confirm(" 你 确信 要 转 去 百度 首页 ? ") ) 
{// 如 果 是 true ， 那 么 就 把 页 面 转向 百度 首页 

location.href="http://www.baidu.com"; 
} 


else 


alert (" 按 了 【取消 】 按 钮 后 ， 系 统 返回 false"); 
. 
于 
function Prom() 
上 
var name=prompt (" 请 输入 您 的 名 字 ","") ; // 将 输入 的 内 容 赋 给 变量 name 
if (name) // 如 果 返 回 的 有 内 容 


alert ("欢迎 您 : "+ name) 

} 
3 
</script> 
</head> 
<body> 
<p> 对 话 框 有 三 种 </p> 
<p>1: 只 是 提醒 ， 不 能 对 脚本 产生 任何 改变 ，</p> 
<p>2: 一 般 用 于 确认 ， 返 回 true 或 者 false </p> 
<p>3: 一 个 带 输入 的 对 话 框 ， 可 以 返回 用 户 填 入 的 字符 串 </p> 
<p> 下 面 我 们 分 别 演示 : </p> 
<p> 演 示 一 : 提醒 对 话 框 </p> 
<p> 

<input type="submit" name="Submit" value=" 提 交 " onclick="ale()" /> 
</p> 
<p> 演 示 二 : 确认 对 话 框 </p> 
<p> 
<input type="submit" name="Submit2" value=" 提 交 " onclick="firm()" /> 

</p> 
<p> 演 示 三 : 要 求 用 户 输入 ， 然 后 给 个 结果 </p> 
<p> 
<input type="submit" name="Submit3" value=" 提 交 " onclick="prom()" /> 
</p> 
</body> 
</html> 


运行 上 述 代码 ， 结 果 如 图 3-16 所 示 。 单 击 页 面 中 演示 一 下 的 【提交 】 按 钮 ， 系 统 将 弹出 
如 图 3-17 所 示 的 提示 对 话 框 。 

单 击 页 面 中 的 演示 二 下 的 【提交 】 按 钮 ， 系 统 将 弹出 如 图 3-18 所 示 的 确认 对 话 框 。 此 时 
如 果 继 续 单 击 【 确 定 】 按 钮 ， 则 打开 百度 首页 ; 如 果 单 击 【 取 消 】 按 钮 ， 则 弹出 提示 对 话 
框 ， 如 图 3-19 所 示 。 

单 击 页 面 中 的 演示 三 下 的 【提交 】 按 钮 ， 在 弹出 的 对 话 框 中 输入 如 图 3-20 所 示 的 信息 后 
单 击 【 确 定 】 按 钮 ， 则 弹出 如 图 3-21 所 示 的 对 话 框 。 
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对 话 框 有 三 种 

1: 只 是 提醒 ， 不 能 对 羌 本 产生 任何 改变 : 
2: 一 般 用 于 确认 ， 返 回 rrue 台 者 false 
3: 一 个 带 输入 的 对 话 框 ， 可 以 返回 用 户 填 入 的 字符 囊 
下 面 我 们 分 别 演 示 : 

被 示 一 提醒 对 话 杠 

国 

演示 二 : 确认 对 话 杠 

Ex 

被 示 三 ， 要求 用 户 痊 入 ， 然 后 给 个 结果 
E33] 


图 3-16 对话 框 用 法 示例 图 3-17 ”提醒 对 话 框 图 3-18 ”确认 对 话 框 


A #7 (Mid) ta, seig folse 


图 3-19 ”取消 对 话 框 图 3-20 输入 对 话 框 3-21 单 击 【确定 】 按 钮 后 
的 对 话 框 


3.7 ”实战 演练 一 一 在 页 面 中 显示 距离 
2016 年 元 旦 节 的 天 数 


在 学 习 了 JavaScript 的 基本 语句 之 后 ， 即 可 实现 多 态 效 果 。 本 实例 将 通过 JavaScript 实现 


在 页 面 中 显示 距离 2016 年 元 旦 的 天 数 。 


有 具体 操作 步骤 如 下 。 
ED 定义 JavaScript 的 函数 ， 实 现 判断 系统 当前 时 间 与 2016 年 元 旦 相距 天 数 的 功 
能 ， 代 码 如 下 : 


function countdown (title,Intime,divId){ 


var online= new Date(Intime); // 根 据 参数 定义 时 间 对 象 
var now = new Date(); // 定 义 当前 系统 时 间 对 象 
Var leave = online.getTime() - now.getTime(); // 计 算 时 间 差 


var day = Math.floor(leave / (1000 * 60 * 60 * 24))+1; 
af day > 
if(document.all){ 
divId.innerHTML="<b> 一 一 距 "+ title+" 还 有 "+day +" 天 ! </b>";// 页 面 显示 信息 
} 
}elsef{ 
if (day =— 1) { 


if(document.all){ 
divId.innerHTMI="<b> 一 一 明天 就 是 "+title+" 啦 !1</b>"; 
} 
}elsef{ 
if (day == 0) {divId.innerHTML= "<b> 今 天 就 是 "+title+" 呀 ! </b>"; 
}elself{ 
if(document.all){ 
divId.innerHTML="<b> 一 一 唉 呀 ! "+title+" 已 经 过 了 ! </b>"; 


在 页 面 中 定义 相关 表格 ， 用 于 显示 当前 时 间距 离 2016 年 元 旦 的 天 数 。 代 码 如 下 : 


<table width="350" height="450" border="0" align="center" cellpadding="0" 
cellspacing="0"> 
<txr> 
<td valign="bottom" ><table width="346" height="418" border="0" 
cellpadding="0" cellspacing="0"> 
<tr> 
<td width="76"> </td> 
<td width="270"> 
<div id="countDown"> 
<b>—</b></div> 
<script language="javascript"> 
countdown ("2016 年 元 旦 ", "1/1/2015", countDown); <!-- 调 用 
JavaScript 函数 --> 
</script> 
</td> 
</tr> 
</table></td> 
E> 
</table> 


芍 于 BY 运行 相关 程序 ， 最 终 效果 如 图 3-22 所 示 。 


宽 入 二 天 | 将 四 电影 网 url 目 ] 京 和 商城 url 且 ] 体育 新 闻 ur| 
御所 1 


一 一 距 2016 年 元 旦 还 有 151 天 ! 


3-22 ”程序 运行 结果 


十 广 朵 普 器 悍 持 对 出 
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3.8 ” 跟 我 练 练 手 


1. 练习 目标 
E 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: 赋值 语句 的 使 用 。 

练习 2: 条 件 判断 语句 的 使 用 。 

练习 3: 循环 控制 语句 的 使 用 。 

练习 4: 跳 转 语句 的 使 用 。 

练习 5: 在 JavaScript 中 使 用 对 话 框 。 


3.9 高 手 甜 点 


甜点 1: 为 什么 会 出 现 死 循环 ? 


在 使 用 for 循环 语句 时 ， 需 要 保证 循环 可 以 正常 结束 ， 也 就 是 保证 循环 条 件 的 结果 为 tue 
的 情况 ， 否 则 循环 体会 无 限 地 执行 下 去 ， 最 终 出 现 死 循环 。 例 如 下 面 的 代码 : 


for (i=2;i>=2;i++) 


alert (i); 


甜点 2: 如 何 计算 200 以 内 所 有 奇数 的 和 ? 
使 用 for 循环 语句 可 以 解决 计算 奇数 和 的 问题 。 代 码 如 下 : 


<script type="text/javascript"> 
Var sum=0; 
for (var i=1l;i<10;i+=2)1{ 
sum=sum+i; 
3 
alert ("200 以 内 所 有 奇数 的 和 为 : "+sum) ; 


</script> 


JavaScript 语言 


代码 中 的 密码 


函数 实质 上 就 是 可 以 作为 一 个 远 辑 单元 对 待 的 一 组 JavaScript 代码 。 使 用 函数 
可 以 使 代码 更 为 简洁 ， 从 而 提高 代码 的 重用 性 。 在 JavaScript 中 ， 大 约 有 95% 的 代 
码 都 包含 在 函数 当中 ， 可 见 ， 函 数 在 JavaScript 中 非常 重要 。 本 章 将 主要 讲述 
JavaScript 中 函数 的 使 用 方法 。 
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4.1 函数 的 简介 


所 谓 函 数 是 指 在 程序 设计 中 ， 将 一 段 经 常 使 用 的 代码 “封装 ”起 来 ， 在 需要 时 直接 调 
用 ， 这 种 “封装 ” 叫 函 数 。JavaScript 中 可 以 使 用 函数 来 响应 网 页 中 的 事件 。 函 数 有 很 多 种 分 
类 方法 ， 常 用 的 分 类 方法 有 以 下 几 种 。 

@ 按 参数 个 数 划分 : 有 参数 函数 和 无 参数 函数 。 

® 按 返 回 值 划分 : 有 返回 值 函数 和 无 返回 值 函数 。 

e。 按 编写 函数 的 对 象 划分 : 预定 义 函数 (系统 函数 ) 和 自 定义 函数 。 

综 上 所 述 ， 函 数 有 以 下 几 个 优点 。 

(1) 代码 灵活 性 较 强 。 通 过 传递 不 同 的 参数 ， 可 以 让 函数 应 用 更 广泛 。 例 如 ， 在 对 两 个 
数据 进行 运算 时 ， 运 算 结 果 取 决 于 运算 符 ， 如 果 把 运算 符 当 作 参 数 ， 那 么 不 同 的 用 户 在 使 用 
函数 时 ， 只 需要 给 定 不 同 的 运算 符 ， 都 能 得 到 自己 想 要 的 结果 。 

(2) 代码 利用 性 强 。 函 数 一 旦 定义 ， 任 何 地 方 都 可 以 调用 ， 而 无 须 再 次 编写 。 

(3) 响应 网 页 事件 。JavaScript 中 的 事件 模型 主要 是 函数 和 事件 的 配合 使 用 。 


4.2 定义 函数 


使 用 函数 前 ， 必 须 先 定义 函数 。 定 义 函 数 时 要 使 用 关键 字 function。JavaScript 中 常用 的 
定义 函数 的 方法 有 不 指定 函数 名 和 指定 函数 名 两 种 。 


4.2.1 不 指定 函数 名 


函数 其 实 就 是 语句 的 集体 ， 即 语句 块 。 语 句 块 就 是 把 一 个 语句 或 多 个 语句 使 用 一 对 大 括 
号 ({) 包 庄 起 来 ， 大 括号 内 的 语句 ， 被 称 为 函数 体 。 对 于 无 函数 名 的 函数 定义 非常 简单 ， 只 需 
要 使 用 关键 字 function 和 可 选 参数 ， 后 面 跟 一 对 大 括号 即 可 。 其 语法 格式 如 下 

function ( [参数 1, 参 数 2..] ) { 

// 函 数 体 语句 

} 

细心 的 读者 会 发 现 ， 上 述 语 句 在 定义 函数 时 ， 没 有 给 函数 命名 ， 即 没有 函数 名 。 需 要 说 
明 的 是 这 样 的 语法 是 不 能 直接 写成 JavaScript 代码 的 。 对 于 不 指明 函数 名 的 函数 ， 一 般 应 用 在 
以 下 几 个 场合 中 。 

(1) 把 函数 直接 赋值 给 变量 。 例 如 : 


var myFun= function( [参数 1, 参数 2..]){ 
// 函 数 体 语句 


} 


其 中 ， 变 量 myFun 将 作为 函数 的 名 字 。 这 种 方法 的 本 质 是 把 函数 当 作 数据 赋值 给 变量 ， 
正如 前 面 所 说 的 ， 函 数 是 一 种 复合 数据 类 型 。 把 函数 直接 赋值 给 变量 的 代码 如 下 : 


过 


<!DOCTYPE html> 

<html> 

<head> 
<title> 函 数 直接 赋值 给 变量 </title> 
<script> 

var myFun=function(){ 


document .write ("这 是 一 个 没有 函数 名 的 函数 ") 
} 
// 执 行 函 数 


myFun(); 
</script> 
</head> 
<body> 
</body> 
</html> 


(2) 网 页 事件 直接 调用 函数 。 例 如 : 
window.onload= function ( [参数 1, 参数 2...] ) { 
// 函 数 体 语句 
}; 
其 中 ，window.onload 是 指 网 页 加 载 时 触发 的 事件 ， 即 加 载 网 页 时 将 执行 后 面 函 数 中 的 代 
码 。 这 种 方法 的 缺陷 是 函数 不 能 被 反复 使 用 。 
总 体 而 言 ， 使 用 不 指定 函数 名 这 种 方法 定义 函数 比较 简单 ， 一 般 适用 于 网 页 事件 直接 调 
用 函数 。 


4.2.2 指定 函数 名 


指定 函数 名 定义 函数 是 应 用 最 广泛 ， 也 是 最 常用 的 方法 ， 语 法 格式 如 下 : 


function 函数 名 ( [参数 1, 参数 2..] ) { 
// 函 数 体 语句 
[return 表达 式 ] 


沁 图 一 “ 剖 遇 否 隔 六 广 嘎 珊 1duoSeAefr 才 才 加 鲁 
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@ ”function 为 关键 字 ， 在 此 用 来 定义 函数 。 

@ 函数 名 必须 是 唯一 的 ， 要 通俗 易 懂 ， 最 好 能 使 用 户 看 其 名 就 能 知 其 意 。 

e@ 使 用 [ ] 括 起 来 的 是 可 选 部 分 ， 可 有 可 无 。 

@ ”可 以 使 用 return 将 值 返回 。 

@ ”参数 是 可 选 的 ， 可 以 不 带 任何 参数 ， 也 可 以 带 多 个 参数 (多 个 参数 之 间 用 逗号 隔 开 )。 


4.2.3 ”函数 参数 的 使 用 


函数 的 参数 主要 是 为 了 提高 函数 的 灵活 性 和 可 重用 性 。 在 定义 函数 方法 时 ， 函 数 名 后 面 
的 圆 括号 中 的 变量 名 称 为 “ 形 参 ”; 在 使 用 函数 时 ， 函 数 名 后 面 圆 括号 中 的 表达 式 被 称 为 
“ 实 参 ”。 由 此 可 知 ， 形 参 和 实 参 都 是 函数 的 参数 ， 它 们 的 区 别 是 : 一 个 表示 声明 时 的 参 
数 ， 相 当 于 定义 的 变量 ， 另 一 个 表示 调用 时 的 参数 。 调 用 带 参数 方法 时 ， 实 现 了 实 参 为 形 参 
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赋值 的 过 程 。 

在 JavaScript 中 定义 函数 的 完成 格式 如 下 : 

functions 自 定义 函数 的 名 称 ( 形 参 1, 形 参 2,.…) 

i 

函数 体 

</script> 

如 果 定 义 的 函数 有 参数 ， 那 么 调用 该 函数 的 语法 格式 如 下 : 

函数 名 ( 实 参 1, 实 参 2，.) 

通常 ， 在 定义 函数 时 使 用 了 多 少 个 形 参 ， 在 函数 调用 时 也 必须 给 出 多 少 个 实 参 。 关 于 形 

参与 实 参 的 注意 事项 主要 有 以 下 几 点 。 

@ 在 未 调用 函数 时 ， 形 参 并 不 占用 存储 单元 。 只 有 在 发 生 方 法 调用 时 ， 才 会 给 函数 中 
的 形 参 分 配 内 存单 元 。 在 调用 结束 后 ， 形 参 所 占 的 内 存单 元 也 自动 释放 。 

@ 实 参 可 以 是 常量 、 变 量 或 表达 式 ， 形 参 必 须 是 声明 的 变量 ， 由 于 JavaScript 是 弱 类 型 
语言 ， 所 以 不 需要 指定 类 型 。 

e@ ”在 函数 调用 中 ， 实 参 列表 中 参数 的 数量 、 类 型 和 顺序 与 形 参 列表 中 的 参数 可 以 不 匹 
配 。 如 果 形 参 个 数 大 于 实 参 个 数 ， 那 么 多 出 的 形 参 值 为 undefind; 反之 ， 多 出 的 实 
参 将 忽略 。 

e@ ” 实 参 对 形 参 的 数据 传递 是 单 向 传递 ， 即 只 能 由 实 参 传 给 形 参 ， 而 不 能 由 形 参 传 回 给 
实 参 。 


4.2.4 ”案例 一 一 函数 返回 值 


如 果 希 望 函 数 执行 完毕 后 给 调用 函数 者 返回 一 个 值 ， 那 么 可 以 使 用 return 语句 。 如 果 函 
数 没有 使 用 return 语句 返回 一 个 值 ， 那 么 系统 将 默认 返回 undefined。 当 程序 执行 到 return 语 
名 时， 将 结束 函数 ， 因 此 return 语句 一 般 都 位 于 函数 体内 的 最 后 一 行 。return 语句 的 格式 
如 下 : 

return [返回 值 ] 


retum 语句 中 的 返回 值 可 以 是 常量 、 变 量 、 表 达 式 等 ， 其 类 型 可 以 是 前 面 介 绍 的 任意 类 
型 。 如 果 省 略 返 回 值 ， 就 代表 结束 函数 。 

【 例 4.1】 (实例 文件 ，ch04W4.1.html) 编 写 函数 calcF， 实 现 输入 一 个 值 ， 计 算 其 一 元 二 次 
方程 式 的 结果 。/ (x)-4x*+3x+2， 单 击 【计算 】 按 钮 ， 使 用 户 通过 提示 对 话 框 输入 x 的 值 ， 在 
对 话 框 中 显示 相应 的 计算 结果 。 

具体 操作 步骤 如 下 。 

GETTY 创建 HTML 文档 ， 结 构 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 


<title> 计 算 一 元 二 次 方程 函数 </title> 


</head> 
<body> 


alert ("计算 结果 : "+result); ”// 输 出 运算 结果 
} 
</script> 


<input type="button" value=" 计 算 "> 
</body> 图 
</html> 多 
在 HIML 文档 的 head 部 分 ， 增 加 以 下 JavaScript 代码 : 引 
三 

<script type="text/javascript"> 豆 
function calcF (x){ 车 
var result; // 声 明 变量 ， 存 储 计算 结果 中 
result=4*x*x+3*x+27 // 计 算 一 元 二 次 方程 值 的 
密 

| 

函 

数 


为 计算 判断 按钮 添加 单 击 (onclick) 事 件 ， 调 用 计算 函数 (calcF)。 将 HTML 文件 中 
<input type="button" value=" 计 ” 算 "> 这 一 行 代码 修改 成 以 下 代码 : 


<input type="button™" value=" 计 算 " onClick="calcF (prompt (' 请 输入 一 个 数值 : 
由 


本 例 主 要 用 到 了 参数 ， 增 加 了 参数 之 后 ， 就 可 以 计算 任意 数 的 一 元 二 次 方程 值 。 试 
想 ， 如 果 没 有 该 参数 ， 函 数 的 功能 将 会 非常 单一 。prompt 方法 是 系统 内 置 的 一 个 调 
用 输入 对 话 框 的 方法 ， 该 方法 可 以 带 参数 ， 也 可 以 不 带 参 数 。 

EEC 运行 代码 ， 显 示 效 果 如 图 4-1 所 示 。 

EECRD 单 击 【计算 】 按 钮 ， 弹 出 一 个 信息 提示 框 ， 在 其 中 输入 数值 ， 如 图 4-2 所 示 。 


图 4-1 加 载 网 页 效果 图 4-2 输入 数值 
EECSRUD 单 击 【 确 定 】 按 钮 ， 即 可 得 出 计算 结果 ， 如 图 4-3 所 示 。 


4-3 ”显示 计算 结果 
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4.3 函数 的 调用 


定义 函数 的 目的 是 为 了 在 后 续 的 代码 中 使 用 函数 。 在 JavaScript 中 调用 函数 的 方法 有 简单 
调用 、 在 表达 式 中 调用 、 在 事件 响应 中 调用 几 种 。 


4.3.1 案例 一 一 范 数 的 简单 调用 


函数 的 简单 调用 又 称 直接 调用 。 该 方法 一 般 比 较 适 合 没有 返回 值 的 函数 。 此 时 相当 于 执 
行 函数 中 的 语句 集合 。 直 接 调 用 函数 的 语法 格式 如 下 : 

函数 名 ( [ 实 参 1,.…] ) 

调用 函数 时 的 参数 取决 于 定义 该 函数 时 使 用 的 参数 。 如 果 定 义 时 该 函数 带 有 参数 ， 那 
么 这 时 就 需要 给 该 函数 增加 实 参 。 

如 果 希 望 例 4.1 的 例子 ， 在 加 载 页 面 时 就 开始 计算 ， 可 以 修改 成 如 下 代码 。 

【 例 4.2】 (实例 文件 : ch04\4.2.htmD 在 浏览 器 加 载 页 面 时 开始 计算 方程 值 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 计 算 一 元 二 次 方程 函数 </title> 

<script type="text/javascript"> 

function calcF (x){ 
Var result; // 声 明 变 量 ， 存 储 计算 结果 
result=4*x*x+3*x+2} // 计 算 一 元 二 次 方程 值 
alert ("计算 结果 : "+result) ; // 输 出 运算 结果 

3 

var inValue = prompt (' 请 输入 一 个 数值 : ' ) 

calcF (inValue); 

</script> 

</head> 

<body> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 4-4 所 示 ， 可 以 看 到 在 加 载 页 面 的 同时 ， 信 
息 提 示 框 就 出 现 了 。 在 文本 框 中 输入 相关 数值 ， 然 后 单 击 【 确 定 】 按 钮 ， 即 可 得 出 计算 结 
果 ， 如 图 4-5 所 示 。 


全 计算 结果 ; 117 


Ce 


图 4-4 “程序 运行 结果 图 4-5 显示 计算 结果 


a 


4.3.2 ”案例 一 一 在 表达 式 中 调用 函数 


在 表达 式 中 调用 函数 的 方式 ， 一 般 比 较 适 合 带 有 返回 值 的 函数 ， 函 数 的 返回 值 参与 表达 
式 的 计算 。 通 常 该 方式 还 会 和 输出 语句 (alert、document 等 ) 配 合 使 用 。 
【 例 4.3】 (实例 文件 :ch04\4.3.htmD 判 断 给 定 的 年 份 是 否 为 半年 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 在 表达 式 中 使 用 函数 </title> 
<script type="text/javascript"> 
// 函 数 isLeapYear 判断 给 定 的 年 份 是 否 为 半年 ， 如 果 是 则 返回 指定 年 份 为 半年 的 字符 串 ， 和 否则 返回 
平年 字符 串 
function isLeapYear (Year)1{ 
// 判 断 间 年 的 条 件 
if (Yearg4==0&&Year%gl001!=011Yyearg400==0) 
{ 


泣 加 一“ 训 遇 否 隔 阐 记 串 玛 1duoSeAer 才 必 小 鲁 


return Year+" 年 是 闽 年 "7 
} 
elae 


{ 
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return year+" 年 是 平年 "; 

} 
3 
document .write (isLeapYear (2014)); 
</acript> 
</head> 
<body> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 4-6 所 示 。 


四 间 HAUserswdminist P - CG X | 多 在 要 达 却 中 人 十 路 。 x 
文件 (六 六 (E] 重 看 (VI 必 硬 闪 ( 和 工具 并 (H) 


2014 年 是 平年 


图 4-6 显示 计算 结果 
4.3.3 ”案例 一 一 在 事件 响应 中 调用 函 数 


JavaScript 是 基于 事件 模型 的 程序 语言 ， 页 面 加 载 、 用 户 单 击 、 移 动 光标 都 会 产生 事件 。 
当 事 件 产生 时 ，JavaScript 可 以 调用 某 个 函数 来 响应 这 个 事件 。 
【 例 4.4】 (实例 文件 ，ch04\4.4.htmD) 在 事件 响应 中 调用 函数 。 


<!DOCTYPE html> 
<html> 


JavaScript 动 态 网 站 开发 
案例 课堂 四 … 


<head> 
<title> 在 事件 响应 中 使 用 函数 </title> 
<script type="text/javascript"> 
function showHello() 
{ 

var count=document .myForm.txtCount.value ; // 文 档 框 中 输入 的 显示 次 数 

for(i=0; i<count; i++){ 
document .write ("<H2>HelloWorld</H2>"); // 按 指定 次 数 输出 HelloWorld 
} 

. 
</script> 
</head> 
<body> 
<form name="myForm"> 

<input type="text" name="txtCount" /> 

<input type="submit" name="Submit" value=" 显 示 HelloWorld" 
onClick="showHello()"> 
</form> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 ， 如 图 4-7 所 示 ， 在 文本 框 中 输入 显示 
“HelloWorld” 的 次 数 ， 这 里 输入 3。 

单 击 【 显 示 HelloWorld】 按 钮 ， 即 可 在 页 面 中 看 到 显示 了 3 个 HelloWorld， 如 图 4-8 所 示 。 
二 
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图 4-7 程序 运行 结果 图 4-8 调用 函数 结果 


4.3.4 案例 一 通过 链接 调用 函数 


函数 除了 可 以 在 事件 响应 中 调用 外 ， 还 可 以 通过 链接 调用 。 在 <a> 标 签 中 的 href 标记 中 使 
用 “JavaScript: 关 键 字 ”链接 来 调用 函数 ， 当 用 户 单 击 该 链接 时 ， 相 关 函 数 就 会 被 执行 。 
【 例 4.5】 (实例 文件 ，ch04\4.5.htmDD) 通 过 链接 调用 函数 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 通 过 链接 调用 函数 </title> 
<script language="javascript"> 
function test(){ 

alert ("从 零 开始 学 Javascript"); 
人 
</script> 
</head> 


<body> 

<a href="javascript:test(); ”> 学 习 JaVaScTript 的 好 书籍 </a> 
</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 4-9 所 示 。 单 击 页 面 中 的 超级 链接 ， 即 可 调 
用 自 定义 的 函数 ， 如 图 4-10 所 示 。 
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4-9 程序 运行 结果 4-10 调用 函数 结果 


4.4 JavaScript 中 常用 的 函数 


在 了 解 了 什么 是 函数 以 及 函数 的 调用 方法 外 ， 下 面 再 来 介绍 一 下 JavaScript 中 常用 的 函 
数 。 例 如 嵌 套 函数 、 递 归 函 数 、 内 置 函数 等 。 


4.4.1 案例 一 一 衬 套 函数 


顾名思义 ， 嵌 套 函 数 就 是 在 函数 的 内 部 再 定义 一 个 函数 。 这 样 定义 的 优点 在 于 可 以 使 用 
内 部 函数 轻松 获得 外 部 函数 的 参数 以 及 函数 的 全 局 变量 。 
嵌 套 函数 的 语法 格式 如 下 : 


function 外 部 函数 名 (参数 1, 参 数 2) { 
function 内 部 函数 名 () { 

函数 体 

} 


【 例 4.6】 (实例 文件 ，ch04\4.6.htmD) 嵌 套 函 数 的 使 用 。 


<!IDOCTYPE html > 
<html> 
<head> 
<title> 苞 套 函 数 的 应 用 </title> 


<script type="text/javascript"> 


var outter=20; // 定 义 全 局 变量 
function add (numberl,number2){ // 定 义 外 部 函数 
function innerAdd(){ // 定 义 内 部 函数 


alert ("参数 的 和 为 : "+ (numberl+number2+outter)); // 取 参数 的 和 
} 
return innerAdd(); // 调 用 内 部 函数 
} 


JavaScript 动 态 网 站 开发 
案例 课堂 由 


</script> 

</head> 

<body> 

<script type="text/javascript"> 

add (20,20); // 调 用 外 部 函数 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 4-11 所 示 。 


4-11 程序 运行 结果 


_ 谋 套 函数 在 JavaScript 语言 中 的 功能 非常 强大 ， 但 是 使 用 说 套 函 数 会 使 程序 的 
下 ”可 读 性 降低 。 


4.4.2 ”案例 一 一 递归 函数 


递归 是 一 种 重要 的 编程 技术 ， 它 用 于 让 一 个 函数 从 其 内 部 调用 其 自身 。 但 是 ， 如 果 递 归 
函数 处 理 不 当 ， 就 会 使 程序 进入 “ 死 循 环 ”。 为 了 防止 “ 死 循 环 ”的 出 现 ， 可 以 设置 一 个 做 
自 加 运算 的 变量 ， 用 于 记录 函数 自身 调用 的 次 数 ， 如 果 次 数 太 多 就 使 它 自动 退出 。 

递归 函数 的 语法 格式 如 下 。 

function 递归 函数 名 (参数 1) { 


递归 函数 名 (参数 2) ; 


【 例 4.7】 (实例 文件 :ch04\4.7.htmD 递 归 函 数 的 使 用 。 


<!DOCTYPE html> 

<html> 

<head> 
<title> 函 数 的 递归 调用 </title> 
<script type="text/javascript"> 
< 

var msg="\n 函数 的 递归 调用 : \n\n"; 
// 响 应 按钮 的 onclick 事件 处 理 程序 


function Test() 


var result; 
msg+=" 调 用 语句 : \n"; 
msg+=" result = sum(20);\n"; 


msg+=" 调 用 步骤 : \n"; 


result=sum(20); 

msg+=" 计 算 结 果 : \n"; 

msg+=" result = "+result+"\n"; 
alert (msg); 


} 
// 计 算 当 前 步骤 的 和 值 


function sum(m) 


if (m==0) 
return 0; 
Lae 
msg+=" 语句 : result = " +m+ "+sum(" +(m-2)+"); \n"; 
result=mt+sum(m-2); 
} 
return result; 
} 
一 -> 
</script> 
</head> 
<body> 
<center> 
<form> 
<input type=button value=" 测 试 " onclick="Test () "> 
</form> 
</center> 
</body> 
</html> 


在 上 述 代码 中 ， 为 了 求 取 20 以 内 的 偶数 而 定义 了 递归 函数 sum(m)。 函 数 Test0 对 其 进行 
调用 ， 并 利用 alert 方法 弹出 相应 的 提示 信息 。 

上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 4-12 所 示 。 单 击 【 测 试 】 按 钮 ， 即 可 在 弹出 
的 信息 提示 框 中 查看 递归 函数 的 使 用 ， 如 图 4-13 所 示 。 
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图 4-12 程序 运行 结果 图 4-13 ”递归 函数 的 使 用 情况 


让 在 定义 递归 函数 时 ， 需 要 两 个 必要 条 件 : 一 个 结束 递归 的 条 件 ; 一 个 递归 调用 
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4.4.3 ”案例 一 一 内 置 函 数 


JavaScript 中 有 两 种 函数 : 一 种 是 语言 内 部 事先 定义 好 的 函数 叫 内 置 函 数 ， 另 一 种 是 自己 
定义 的 函数 。 使 用 JavaScript 的 内 置 函 数 ， 可 提高 编程 效率 。 常 用 的 内 置 函数 有 以 下 6 种 。 


1. eval 函数 


eval(expr) 函 数 可 以 把 一 个 字符 串 当 作 一 个 JavaScript 表达 式 一 样 去 执行 。 具 体 来 说 ， 就 
是 eval 接受 一 个 字符 串 类 型 的 参数 ， 将 这 个 字符 串 作 为 代码 在 上 下 文 环境 中 执行 ， 并 返回 执 
行 结 果 。 其 中 ，expr 参数 是 包含 有 效 JavaScript 代码 的 字符 串 值 ， 这 个 字符 串 将 由 JavaScript 
分 析 器 进行 分 析 和 执行 。 

在 使 用 eval 函数 时 需要 注意 以 下 两 点 。 

(1) 它 是 有 返回 值 的 ， 如 果 参 数字 符 串 是 一 个 表达 式 ， 就 会 返回 表达 式 的 值 。 如 果 参 数 
字符 串 不 是 表达 式 ， 没 有 值 ， 那 么 将 返回 undefined。 

(2) 参数 字符 串 作 为 代码 执行 时 ， 是 和 调用 eval 函数 的 上 下 文 相关 的 ， 即 其 中 出 现 的 变 
量 或 函数 调用 ， 必 须 在 调用 eval 的 上 下 文 环境 中 可 用 。 

【 例 4.8】 (实例 文件 :ch04\4.8.html) 使 用 eval 函数 。 


<!DOCTYPE html> 
<html> 
<head> Ex 
<title>eval 函数 应 用 示例 </title> 
</head> 
<script type="text/javascript"> 
这 后 二 
function computer (num) 
return eval (num) +eval (num); 
} 
document .write ("执行 语句 return eval (123) +eval (123) 后 结果 为 : ") ; 
document .write (computer('123')); 
一 -> 
</ascript> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 4-14 所 示 。 
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执行 语句 return eval (133) :eval (123) 后 结果 为 ，246 


图 4-14 ”程序 运行 结果 
2. isFinite 函数 


isFinite(number) 是 用 来 确定 参数 是 否 是 一 个 有 限 数 值 的 函数 。 其 中 number 参数 为 必 选 
项 ， 但 可 以 是 任意 的 数值 。 如 果 该 参数 为 非 数 字 、 正 无 穷 数 或 负 无 穷 数 ， 则 返回 false， 否 则 


true。 如 果 该 参数 是 字符 串 类 型 的 数字 ， 则 将 会 自动 转化 为 数字 型 。 
【 例 4.9】 (实例 文件 :ch04\4.9.htmD 使 用 isFinite 函数 。 


<!DOCTYPE html> 

<html> 

<head> 

<title>isFinite 函数 应 用 示例 </title> 

</head> 

<script type="text/javascript"> 

三 三 

document .write ("执行 语句 isFinite (123) 后， 结果 为 ") 
document .write(isEFinite (123)+ "<br/>") 

document .write ("执行 语句 isFinite (-3.1415) 后 ， 结 果 为 ") 
document .write(isFinite(-3.1415)+ "<br/>") 
document .write ("执行 语句 isFinite (10-4) 后， 结果 为 ") 
document .write (isFinite(10-4)+ "<br/>") 

document .write ("执行 语句 isFinite (0) 后， 结果 为 ") 
document .write (isFinite(0)+ "<br/>") 
document .write ("执行 语句 isFinite (Hello word! ) 后， 结果 为 ") 
document .write (isFinite("Hello word! ")+ "<br/>") 
document .write ("执行 语句 isFinite (2009/1/1) 后， 结果 为 ") 
document .write (isFinite("2009/1/1")+ "<br/>") 

一 -> 

</script> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 4-15 所 示 。 
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执行 语句 isFinite (-3. 1415) 后 ， 结 果 为 true 
执行 语句 isFinite (10-4) 后 ,结果 为 :rue 


执行 语 旬 isFinite (0) 后 ， 结 果 为 true 
执行 语 各 isFinite (Hello word! ) 后 ,结果 为 false 
执行 语句 isFinite (2003/1/1) 后 ， 结 果 为 false 


图 4-15 程序 运行 结果 
3.isNaN 函数 


isNaN(num) 函 数 用 于 指明 提供 的 值 是 否 是 保留 值 NaN: 如 果 值 是 NaN， 那 么 isNaN 函数 
将 返回 true; 否则 返回 false。 参 数 num 为 被 检查 是 否 为 NAN 的 值 ， 当 参数 是 字符 串 类 型 的 
数字 时 ， 将 会 自动 转化 为 数字 型 。 使 用 isNaNGum) 函 数 的 典型 情况 是 检查 parseInt 和 
parseFloat 方法 的 返回 值 。 还 有 一 种 办 法 ， 变 量 可 以 与 它 自身 进行 比较 。 如 果 比 较 的 结果 不 
等 ， 那 么 它 就 是 NaN。 这 是 因为 NaN 是 唯一 与 自身 不 等 的 值 。 

【 例 4.10】 (实例 文件 ，ch04\4.10.html) 使 用 isNaN 函数 。 


<!IDOCTYPE html> 

<html> 

<head> 

<title>isNaN 函数 应 用 示例 </title> 


Ee 
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</head> 
<script type="text/javascript"> 


document .write ("执行 语句 isNaN (123) 后 ， 结 果 为 ") 
document .write (isNaN (123)+ "<br/>") 
document .write ("执行 语句 isNaN (-3.1415) 后 ， 结 果 为 ") 
document .write (isNaN (-3-1415)+ "<br/>") 

document .write ("执行 语句 isNaN (10-4) 后 ， 结 果 为 ") 
document .write (isNaN (10-4)+ "<br/>") 

document .write(" 执 行 语句 isNaN (0) 后 ， 结 果 为 ") 
document .write(isNaN (0)+ "<br/>") 

document .write ("执行 语句 isNaN (Hello word! ) 后， 结果 为 ") 
document .write (isNaN ("Hello word! ")+ "<br/>") 
document .write ("执行 语句 isNaN (2009/1/1) 后， 结果 为 ") 
document .write (isNaN("2009/1/1")+ "<br/>") 

一 -> 

</script> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 4-16 所 示 。 
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图 4-16 程序 运行 结果 
4. parseInt 和 parseFloat 函数 


parseInt 和 parseFloat 函数 都 是 将 数字 字符 串 转 化 为 一 个 数值 ， 但 它们 也 存在 着 区 别 : 在 
parseInt(str[radix]) 函 数 中 ，str 参数 是 必 选 项 ， 是 要 转换 成 数字 的 字符 串 ， 例 如 “11”; radix 
参数 为 可 选项 ， 用 于 确定 str 的 进 制 数 。 如 果 radix 参数 缺 省 ， 则 前 级 为 '0x' 的 字符 串 被 当 作 
十 六 进 制 ， 前 缀 为 '0' 的 字符 串 被 当 作 八进制 ， 其 他 字符 串 都 被 当 作 十 进 制 ， 当 第 一 个 字符 
不 能 转换 为 基于 基数 的 数字 时 ， 则 返回 NaN。 

【 例 4.11】 (实例 文件 ， ch04\4.11.htmD) 使 用 parseInt 函数 。 


<!DOCTYPE html> 

<html> 

<head> 

<title>parseInt 函数 应 用 示例 </title> 
</head> 

<body> 

<center> 

<h3>parseInt 函数 应 用 示例 </h3> 

<script type="text/javascript"> 

> 

document .write ("<br/>"+" 执 行 语句 parseInt ('10') 后 ,结果 为 : ") ; 
document .write (parseInt ("10")+"<br/>") ; 


加 


document .write ("<br/>"+" 执 行 语句 parseInt ('21',10) 后 ， 结 果 为 : ") ，; 
document -write (parseInt ("21",10)+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseInt ('11',2) 后 ， 结 果 为 : ") ; 
document .write (parseInt ("11",2)+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseInt('15',8) 后 ， 结 果 为 : ") ;> 
document .write (parseInt ("15",8)+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseInt ('1f' ,16) 后 ， 结 果 为 : ") ，; 
document .write (parseInt ("1f",16)+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseInt ('010') 后 ， 结 果 为 : ") ，; 
document .write (parseInt ("010")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseInt ('abc') 后 ， 结 果 为 : ") ; 
document .write (parseInt ("abc")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseInt ('l2abc') 后 ， 结 果 为 : ") ， 
document .write (parseInt ("12abc")+"<br/>") ; 

--> 

</script> 

</center> 

</body> 

</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 4-17 所 示 。 从 结果 中 可 以 看 出 ， 表 达 式 
parseInt('15',8) 将 会 把 八进制 的 15 转换 成 十 进 制 的 数值 ， 其 计算 结果 为 13。 
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执行 语句 parseJnx( 10 ) 后 ， 结 果 为 ，10 
执行 语句 parseInt( 21 ， 10) 后， 结果 为 ， 21 
1 3) 后 ， 结 果 为 ，3 
执行 语 菇 parseIntf 15 3) 后 ， 结 果 为 ，13 
执行 语 旬 parselnt( 1 ,16) 后 ， 结 果 为 ，31 
执行 语句 parscInt( 010 ) 后 ， 结 果 为 ，10 
执行 语句 parseTnt fabhc") 后 ， 结 时 为 ，NaN 
找 行 语句 parseInt( 12abc' ) 后 ， 结 果 为 ，12 


图 4-17 程序 运行 结果 


parseFloat(stD) 函数 返回 由 字符 串 转换 得 到 的 浮 点 数 ， 其 中 字符 串 参 数 是 包含 浮 点 数 的 字 
符 串 ， 即 如 果 str 的 值 为 11'， 那 么 计算 结果 就 是 11， 而 不 是 3 或 B。 如 果 处 理 的 字符 不 是 以 
数字 开头 ， 则 返回 NaN。 当 字符 后 面 出 现 非 字符 部 分 时 ， 则 只 取 前 面 数 字 部 分 。 

【 例 4.12】 (实例 文件 :ch04\4.12.html) 使 用 parseFloat 函数 。 


<!DOCTYPE html> 

<html> 

<head> 

<title>parseFloat 函数 应 用 示例 </title> 
</head> 

<body> 

<center> 

<h3>parseFloat 函数 应 用 示例 </h3> 


as® 
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<script type="text/javascript"> 

过 二 

document .write ("<br/>"+" 执 行 语句 parseFloat('10') 后 ， 结 果 为 : ") ; 
document .write (parseFloat ("10")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseFloat ('21.001') 后 ， 结 果 为 : ") ; 
document .write (parseFloat ("21.001")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseFloat ('21.999') 后 ， 结 果 为 : ") ; 
document .write (parseFloat ("21.999")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseFloat ('314e-2') 后 ， 结 果 为 : ") ; 
document .write (parseFloat ("314e-2")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseFloat ('0.0314E+2') 后 ， 结 果 为 : ") ; 
document .write (parseFloat ("0.0314E+2")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseFloat ('010') 后 ， 结 果 为 : ") ， 
document .write (parseFloat ("010")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseFloat ('abc') 后 ， 结 果 为 : ") ，; 
document .write (parseFloat ("abc")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseFloat ('1.2abc!' ) 后， 结果 为 : ") ，; 
document .write (parseFloat ("1.2abc")+"<br/>") ; 

一 -> 

</script> 

</center> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 4-18 所 示 。 
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执行 语句 parscFloot( 10 ) 后 ， 结 果 为 ，10 
执行 语句 parseFloar( 21. 001 ) 后， 结果 为 ，21. 001 
执行 语句 parseFloat ("21.999' ) 后 ， 结 果 为 ，21. 999 
执行 语句 parseFloat(' 314e-2' ) 后 ， 结 果 为 ，3. 14 
执行 语句 parseFloat( 0. 0314E-2 ) 后 ， 结 果 为 ，3. 14 
技 行 语句 parseFloat (010' ) 后 ,结果 为 ，10 
执行 语句 parseFloat( abe’ ) 后 ， 结 果 为 ，NaN 
执行 语句 parseFloat ( 1. 2abc' ) 后 ， 结 果 为 ，1.2 


图 4-18 ”程序 运行 结果 
5. Number 和 String 函数 


在 JavaScript 中 ，Number 和 String 函数 主要 用 来 将 对 象 转换 为 数字 或 字符 串 。 其 中 ， 
Number 函数 的 转换 结果 为 数值 型 ， 例 如 Number("1234") 的 结果 是 1234; String 函数 的 转换 结 
果 为 字符 型 ， 例 如 String(1234) 的 结果 是 “"1234"”。 

【 例 4.13】 (实例 文件 : ch04\4.13.html) 使 用 Number 和 String 函数 。 


<!1DOCTYPE html> 
<html> 


<head> 


<title>Number 和 string 应 用 示例 </title> 


</head> 
<body> 
<center> 


<h3>Number 和 string 应 用 示例 </h3> 
<script type="text/javascript"> 


I 


document. 
document. 
document. 
document. 
document. 
document. 
.Write ("<br/>"+" 执 行 语句 String('abc')+String('abc') 后 ， 结 果 为 : ") ; 


document 


document. 


-> 


</script> 
</center> 


</body> 
</html> 


运行 上 述 代 码 ， 结 果 如 图 4-19 所 示 。 从 中 可 以 看 出 ， 语 句 “Number('1234)+Number 
(1234)” 首 先 将 “1234” 转 换 为 数值 型 并 进行 数值 相 加 ， 结 果 为 2468; 而 语句 String('1234)+ 
String(1234) 则 是 按照 字符 串 相 加 的 规则 将 “1234” 人 合并， 结果 为 12341234。 


write ("<br/>"+" 执 行 语句 Number ('1234')+Number ('1234') 后 ， 结 果 为 : ") ; 
write (Number ('1234')+Number ('1234')+"<br/>") ; 

write ("<br/>"+" 执 行 语句 string('1234')+string('1234') 后 ， 结 果 为 : ") ; 
writel(Sstring('1234')+String('1234')+"<br/>") ; 

write ("<br/>"+" 执 行 语句 Number ('abc')+Number ('abc') 后 ， 结 果 为 : ") ; 
write (Number ('abc')+Number('abc')+"<br/>") ; 
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write(string('abc')+String('abc')+"<br/>") ; 


刁 HAsersAdminisrato P » © Xx |@ Numberfasving 酉 有 x| 
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Number 和 String 应 用 示例 


执行 语句 Number ("1234 ) :Number( 1234 ) 后， 结果 为 ，2468 
执行 语句 String( 1234 )*String( 1234 ) 后， 结果 为 ，12341234 
执行 语句 Numbcr(' abc ) -Numbcr( abc’ ) 后 ,结果 为 ，NaN 
执行 语句 String( abc' )-String( abc ) 后 ， 结 果 为 ，abcabc 


图 4-19 程序 运行 结果 


6. escape 和 unescape 函数 

escape(charString) 函 数 主要 用 于 对 String 对 象 进行 编码 ， 以 使 其 能 在 所 有 计算 机 上 可 读 。 
其 中 charString 参数 为 必 选 项 ， 表 示 要 编码 的 任意 String 对 象 或 文字 。 它 返回 一 个 包含 了 
charString 内 容 的 字符 串 值 (Unicode 格式 )。 除 了 个 别 诸 如 “*@ ”之 类 的 符号 外 ， 其 余 所 有 空 


格 、 标 点 、 重 音符 号 ， 以 及 其 他 非 ASCII 字符 均 可 用 %xx 编码 代 蔡 ， 其 中 xx 等 于 表示 该 字符 


的 十 六 进 制 数 。 


【 例 4.14】 (实例 文件 : ch04\4.14.html) 使 用 escape 函数 。 


<!1DOCTYPE html> 


<html> 


ss@ 
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<head> 

<title>escape 应 用 示例 </title> 

</head> 

<body> 

<center> 

<h3>escape 应 用 示例 </h3> 

</center> 

<script type="text/javascript"> 

局 三 三 

document .write(" 由 于 空格 符 对 应 的 编码 是 s20， 感 叹 号 对 应 的 编码 符 是 s21，"+"<pr/>") ; 
document .write ("<br/>"+" 故 ， 执行 语句 escape('hello world!') 后 ， bd 二 这 
document .write ("<br/>"+" 结 果 为 : "+escape ("hello world!")) ; 

--> 

</script> 

</body> 

</html> 


运行 上 述 代码 ， 结 果 如 图 4-20 所 示 。 由 于 空格 符 对 应 的 编码 是 %20， 感 叹 号 对 应 的 编码 
符 是 %21， 因 此 执行 语句 escape("hello world!") 后 的 显示 结果 为 hello%20world%21。 


下 HWUsersAdminist P ~ © X | @ escapet 志 5 
文件 站 汕 颖 (于 在 (V) 必定 闫 (A) 工具 (T) 帮 同 [H) 


escape 应 用 示例 


由 于 空格 符 对 应 的 编码 是 %s20， 感 叹 号 对 应 的 编码 符 是 %21， 
故 ， 执 行 语句 escape( hello world!" ) 后， 
结果 为 ，hello%20world%21 


图 4-20 程序 运行 结果 


unescape(charString) 函 数 用 于 返回 指定 值 的 ASCII 字符 串 。 其 中 ，charString 参数 为 必 
选项 ， 表 示 需 要 解码 的 String 对 象 。 与 escape(charString) 函 数 相 反 ，unescape(charString) 函 数 
返回 一 个 包含 charstring 内 容 的 字符 串 值 ， 所 有 以 %xx 十 六 进 制 形式 编码 的 字符 都 用 ASCII 
字符 集中 等 价 的 字符 代 蔡 。 

【 例 4.15】 (实例 文件 ，ch04\4.15.html) 使 用 unescape 函数 。 


<!DOCTYPE html> 

<html> 

<head> 

<title>unescape 函数 应 用 示例 </title> 

</head> 

<body> 

<center> 

<h3>unescape 函数 应 用 示例 </h3> 

</center> 

<script type="text/javascript"> 

< 

document -write ("由 于 空格 符 对 应 的 编码 是 $20， 感 叹 号 对 应 的 编码 符 是 821, "+"<br/>") ，; 
document .write ("<br/>"+" 故 ,执行 语句 unescape ('hello%20world%21') 后 ， 


be 

document .write ("<br/>"+" 结 果 为 : "+unescape ('hello®%20world®%21')) ; 
--> 

</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 4-21 所 示 。 
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unescape 函 数 应 用 示例 
由 于 空格 符 对 应 的 编码 是 %20， 感 叹 号 对 应 的 编码 符 是 %21， 
故 ， 执 行 语句 unescape( hello%20world%21 ) 后 ， 
结果 为 ，hello world! 
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4.5 ”实战 演练 一 一 购物 简易 计算 器 


编写 如 图 4-22 所 示 的 效果 。 编 写 具有 能 对 两 个 操作 数 进行 加 、 减 、 乘 、 除 法 运算 的 简易 
计算 器 : 加 法 运算 效果 ， 如 图 4-23 所 示 ; 减法 运算 效果 ， 如 图 4-24 所 示 ; 乘法 运算 效果 ， 如 
图 4-25 所 示 ; 除法 运算 效果 ， 如 图 4-26 所 示 。 本 例 中 涉及 本 章 所 学 的 数据 类 型 、 变 量 、 流 程 
控制 语句 、 函 数 等 知识 ， 请 读者 注意 ， 该 示例 中 还 涉及 少量 后 续 章 节 的 知识 ， 例 如 事件 模 


型 。 


不 过 ， 前 面 的 案例 中 也 有 使 用 ， 请 读者 先 掌握 其 用 法 ， 详 见 对 象 部 分 。 
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4-23 ”加 法 运算 
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ee CUsersyingda\C 只- CO x (名 司 CUsersyingda\C py x 
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第 一 个 数 [2 
第 -人 ME |] 
[mem | ee | em | We 
计算 结果 [72 
图 4-25 乘法 运算 图 4-26 ”除法 运算 
具体 操作 步骤 如 下 。 


& ET 新 建 HTML 文档 ， 输 入 代码 如 下 : 


<!DOCTYPE html> 
\ <html> 
N <head> 
<meta charset="utf-8" /> 
<title> 购 物 简易 计算 器 </title> 
<style> 
/* 定 义 计算 器 块 信息 */ 
sectiont{ 
background-color:#C9E495; 
width:260px; 
height:320px; 
text-align:center; 
padding-top:1lpx; 


} 
/* 细 边框 的 文本 输入 框 */ 
.textBaroder 
{ 
border-width:1px; 
border-style:solid; 
} 


</STYLE> 
</head> 
<body> 
<section> 
<hl><img src="images/1logo.gif" width="240" height="31"” > 欢迎 您 来 淘宝 ! </h1> 
<form action="" method="post" name="myform" id="myform"> 
<h3><img src="images/shop.gif" width="54" height="54"> 购 物 简易 计算 器 </h3> 
<p> 第 一 个 数 <input name="txtNuml" type="text" class="textBaroder" 
id="txtNuml" size="25"></p> 
<p> 第 二 个 数 <input name="txtNum2" type="text" class="textBaroder" 
id="txtNum2" size="25"></p> 


<p><input name="addButton2" type="button" id="addButton2" value="” 十 " 


onClick="compute('+')"> 

<input name="subButton2" type="button" id="subButton2" value=" 一 "> 
<input nam ‘mulButton2" type="button" id="mulButton2" value: LE 
<input name="divButton2" type="button" id="divButton2" value=" + "> 
<p> 计 算 结 果 <INPUT name="txtResult" type="text" class="textBaroder" 
id="txtResult" size="25"></p> 

</form> 

</section> 

</body> 

</html> 


区 对 了 保存 HTML 文件 。 选 择 相应 的 保存 位 置 ， 设 置 文 件 名 为 “综合 示例 一 购物 简易 


计算 器 html”。 
在 HIML 文档 的 head 部 分 ， 输 入 以 下 代码 : 
<script> 


function compute (op) 
{ 
Var numl,num2; 
numl=parseFloat (document .myform.txtNuml .value); 
num2=parseFloat (document .myform.txtNum2 .value) 7 
if (op=="+") 
document .myform.txtResult .value=numl+num2; 
(+ 人 
document .myform.txtResult .value=numl-num2; 
EMeRE > 小 
document .myform.txtResult .value=numl*num2; 
if (op=="/" && num2!=0) 
document .myform.txtResult .value=numl/num2; 
} 
</script> 


EZ 修改 + 按钮 ，-+ 按 钮 ，x 按 钮 ，+ 按 钮 ， 代 码 如 下 : 


<input name="addButton2" type="button" id="addButton2" value=" 二" 
onClick="compute('+')"> 

<input name="subButton2" type="button" id="subButton2" Value=" 一 " 
onCclick="compute('—-')"> 

<input name="mulButton2" type="button" id="mulButton2" value=" X " 
onClick="compute('*')"> 

<input name="divButton2" type="button" id="divButton2" value=" 二 
onClick="compute('/')"> 


区 于 BY 保存 网 页 ， 然 后 预览 效果 。 
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2. 上 机 练习 


练习 1: 定义 函数 的 使 用 方法 。 

练习 2: 函数 的 调用 方法 。 

练习 3: JavaScript 中 常用 的 函数 使 用 方法 。 
练习 4: 购物 简易 计算 器 的 制作 方法 。 


4.7 高 手 甜 点 


甜点 1: 如 果 浏览 器 不 支持 JavaScript， 但 又 要 使 用 该 浏览 器 ， 怎 样 才能 保证 网 页 的 
美观 性 不 变 影 响 ? 


现在 浏览 器 种 类 、 版 本 繁多 ， 不 同 浏览 器 对 JavaScript 代码 的 支持 度 均 不 一 样 。 为 了 保证 
浏览 器 不 支持 部 分 的 代码 ， 不 影响 网 页 的 美观 ， 可 以 使 用 HTML 注释 语句 将 其 注释 ， 这 样 便 
不 会 在 网 页 中 输出 这 些 代 码 。HTML 注释 语句 使 用 “<!--” 和 “-->” 标 记 JavaScript 代码 。 


Se 甜点 2: 函数 Number 和 parseInt 都 可 以 将 字符 串 转换 成 整数 ， 二 者 有 何 区 别 ? 


EN 函数 Number 和 parseInt 都 可 以 将 字符 串 转换 成 整数 ， 它 们 的 区 别 如 下 。 

函数 Number 不 但 可 以 将 数字 字符 串 转换 成 整数 ， 还 可 以 转换 成 浮 点 数 。 它 的 作用 是 将 
数字 字符 串 直接 转换 成 数值 。 而 parseInt 函数 只 能 将 数字 字符 串 转换 成 整数 。 

函数 Number 在 转换 时 ， 如 果 字符 串 中 包括 非 数字 字符 ， 转 换 将 会 失败 ;而 parseInt 函数 
只 要 开头 第 1 个 是 数字 字符 即 可 转换 成 功 。 
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案例 课堂 > 


5.1 了 解 对 象 


在 JavaScript 中 ， 对 象 包括 内 置 对 象 、 自 定义 对 象 等 多 种 类 型 ， 使 用 这 些 对 象 可 大 大 简化 
JavaScript 程序 的 设计 。 


5.1.1 什么 是 对 象 


对 象 (object) 是 一 件 事 、 一 个 实体 、 一 个 名 词 ， 可 以 是 获得 的 东西 ， 可 以 是 想象 有 自己 标 
识 的 任何 东西 。 对 象 是 类 的 实例 化 。 一 些 对 象 是 活 的 ， 一 些 对 象 不 是 。 若 以 自然 人 为 例 ， 构 
造 一 个 对 象 ， 其 中 Attribute 表示 对 象 状态 ，Method 表示 对 象 行为 ， 如 图 5-1 所 示 。 

在 计算 机 语言 中 也 存在 对 象 ， 可 以 将 其 看 作 是 相关 变量 和 方法 的 软件 集 。 对 象 主要 由 下 
而 两 部 分 组 成 : 

e ”一 组 包含 各 种 类 型 数据 的 属性 ; 

e ”允许 对 属性 中 的 数据 进行 操作 且 有 相关 方法 。 

以 HTML 文档 中 的 document 对 象 为 例 ， 其 中 包含 各 种 方法 和 属性 ， 如 图 5-2 所 示 。 


Attribute 


5-1 ”对象 状态 和 行为 图 5-2 HTML 文档 中 的 document 构造 的 对 象 
凡是 能 够 提取 一 定 度量 数据 ， 并 通过 某 种 方式 对 度量 数据 实施 操作 的 客观 存在 都 可 以 构 
成 一 个 对 象 。 


e@ 属性: 用 来 描述 对 象 的 状态 ， 通 过 定义 属性 值 定义 对 象 的 状态 。 在 图 5-1 中 ， 用 字 
符 串 Nationality 表示 人 的 国籍 ， 所 以 Nationality 成 为 人 的 某 个 属性 。 

e@ 方法: 针对 对 象 行为 的 复杂 性 ， 对 象 的 某 些 行为 可 以 用 通用 的 代码 来 处 理 ， 这 些 代 
码 就 是 方法 。 在 图 5-2 中 ， 用 方法 Open() 来 处 理 文件 的 打开 情况 ， 此 时 Open0 就 是 
方法 。 

@ 事件: 由 于 对 象 行为 的 复杂 性 ， 对 象 的 某 些 行 为 不 能 使 用 通用 的 代码 来 处 理 ， 需 要 
用 户 根据 实际 情况 来 编写 处 理 该 行为 的 代码 ， 该 代码 就 被 称 为 事件 。 

JavaScript 是 基于 对 象 的 编程 语言 ， 除 循环 和 关系 运算 符 等 语言 构造 之 外 ， 其 所 有 的 特征 

几乎 都 是 按照 对 象 的 处 理 方法 进行 的 。 

JavaScript 支持 的 对 象 主要 包括 以 下 4 种 。 

@ JavaScript 核心 对 象 : 包括 同 基本 数据 类 型 相关 的 对 象 (例如 String、Boolean、 
Number)、 人 允许 创建 用 户 自 定义 和 组 合 类 型 的 对 象 (例如 Object、Array) 和 其 他 能 简化 


JavaScript 操作 的 对 象 (例如 Math、Date、 RegExp、Function)。 

@ ”浏览 器 对 象 ， 包括 不 属于 JavaScript 语言 本 身 但 被 绝 大 多 数 浏 览 器 所 支持 的 对 象 ， 例 
如 控制 浏览 器 窗口 和 用 户 交互 界面 的 Window 对 象 、 提 供 客户 端 浏 览 器 配置 信息 的 
Navigator 对 象 。 

@ ”用 户 自 定义 对 象 + Web 应 用 程序 开发 者 用 于 完成 特定 任务 而 创建 的 自 定 义 对 象 ， 可 
自由 设计 对 象 的 属性 、 方 法 和 事件 处 理 程序 ， 编 程 灵活 性 较 大 。 

@ 文本 对 象 : 由 文本 域 构成 的 对 象 ， 在 DOM 中 定义 ， 同 时 赋予 很 多 特定 的 处 理 方 
法 ， 例 如 insertData0、appendData() 等 。 


5.1.2 面向 对 象 编程 


面向 对 象 程序 设计 (ObjectOriented Programming，OOP) 是 一 种 起 源 于 20 世纪 60 年 代 的 
Simula 语言 ， 其 自身 理论 现 已 十 分 完善 ， 并 被 多 种 面向 对 象 程序 设计 语言 实现 。 面 向 对 象 编 
程 的 基本 原则 是 : 计算 机 程序 由 单个 能 够 起 到 子 程序 作用 的 单元 或 对 象 组 合 而 成 。 面 向 对 象 
编程 具有 3 个 最 基本 的 特点 : 重用 性 、 灵 活性 和 扩展 性 。 这 种 方法 将 软件 程序 中 的 每 一 个 元 
素 作为 一 个 对 象 看 待 ， 同 时 定义 对 象 的 类 型 、 属 性 和 描述 对 象 的 方法 。 为 了 实现 整体 操作 ， 
每 个 对 象 都 应 该 能 够 接收 信息 、 处 理 数 据 和 向 其 他 对 象 发 送信 息 。 

面向 对 象 编程 主要 包含 有 以 下 3 个 重要 的 概念 。 


1. 继承 


继承 性 是 子 类 自动 共享 父 类 数据 结构 和 方法 的 机 制 ， 这 是 类 之 间 的 一 种 关系 。 在 定义 和 
实现 一 个 类 的 时 候 ， 可 以 在 一 个 已 经 存在 的 类 的 基础 之 上 来 进行 ， 把 这 个 已 经 存在 的 类 所 定 
义 的 内 容 作为 自己 的 内 容 ， 并 加 入 若干 新 内 容 。 继 承 性 是 面向 对 象 程序 设计 语言 不 同 于 其 他 
语言 的 最 重要 的 特点 ， 是 其 他 语言 所 没有 的 。 

继承 主要 分 为 以 下 两 种 类 型 : 

® ”在 类 层次 中 ， 如 果子 类 只 继承 一 个 父 类 的 数据 结构 和 方法 ， 则 该 继承 被 称 为 单 重 

继承 。 

e ”在 类 层次 中 ， 如 果子 类 继承 了 多 个 父 类 的 数据 结构 和 方法 ， 则 该 继承 被 称 为 多 重 

继承 。 

在 软件 开发 中 ， 类 的 继承 性 使 所 建立 的 软件 具有 开放 性 、 可 扩充 性 。 这 是 信息 组 织 与 分 
类 行 之 有 效 的 方法 ， 简 化 了 对 象 、 类 的 创建 工作 量 ， 增 加 了 代码 可 重 性 。 采 用 继承 性 ， 提 供 
了 类 规范 的 等 级 结构 。 通 过 类 的 继承 关系 ， 使 公共 的 特性 能 够 共享 ， 提 高 了 软件 的 重用 性 。 


2. 封装 


封装 的 作用 是 将 对 象 的 实现 过 程 通过 函数 等 方式 封装 起 来 ， 使 用 户 只 能 通过 对 象 提供 的 
属性 、 方 法 和 事件 等 接口 去 访问 对 象 ， 而 不 需要 知道 对 象 的 具体 实现 过 程 。 封 装 的 目的 是 增 
强 安全 性 和 简化 编程 ， 用 户 不 必 了 解 具 体 的 实现 细节 ， 只 需 通过 外 部 接口 一 一 以 特定 的 访问 
权限 来 使 用 类 的 成 员 。 

封装 允许 对 象 运行 的 代码 相对 于 调用 者 来 说 是 完全 独立 的 ， 调 用 者 通过 对 象 及 相关 接口 


全 
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参数 来 访问 此 接口 。 只 要 对 象 的 接口 不 变 ， 即 使 对 象 的 内 部 结构 或 实现 方法 发 生 了 改变 ， 程 
序 的 其 他 部 分 也 不 用 改变 。 

3. 多 态 

多 态 性 是 指 相同 的 操作 或 函数 、 过 程 可 作用 于 多 种 类 型 的 对 象 ， 并 获得 不 同 的 结果 。 不 
同 的 对 象 ， 收 到 同一 消息 可 以 产生 不 同 的 结果 ， 这 种 现象 称 为 多 态 性 。 多 态 性 允许 每 个 对 象 
以 适合 自身 的 方式 去 响应 共同 的 消息 。 多 态 性 增强 了 软件 的 灵活 性 和 重用 性 。 

需要 说 明 的 是 : 定位 JavaScript 脚本 是 基于 对 象 的 脚本 编程 语言 ， 而 不 是 面向 对 象 和 编程 
语言 。 其 原因 在 于 : JavaScript 是 以 DOM 和 BOM 中 定义 的 对 象 模型 及 操作 方法 为 基础 ， 但 
又 不 具备 面向 对 象 编程 语言 所 必 具 备 的 显著 特征 ， 例 如 分 类 、 继 承 、 封 装 、 多 态 、 重 载 等 。 
所 以 ， 用 户 只 能 通过 嵌入 其 他 面向 对 象 编程 语言 ， 诸 如 Java 生成 的 Java Applet 组 件 等 来 实现 
相应 的 功能 。 另 外 ，JavaScript 还 支持 DOM 和 BOM 提供 的 对 象 模型 ， 用 于 根据 其 对 象 模型 
层次 结构 来 访问 目标 对 象 的 属性 并 对 对 象 施加 相应 的 操作 。 
全 > 在 JavaScript 语言 中 ， 任 何 类 型 的 对 象 之 所 以 都 能 被 赋予 任 意 类 型 的 数值 ， 是 
衣着。 因为 Javaseript 为 弱 类 型 的 脚本 语言 ， 即 变量 在 使 用 前 无 须 作 任何 声明 ， 只 有 在 济 

览 器 解释 运行 其 代码 时 ， 系 统 才 检查 目标 变量 的 数据 类 型 。 


5.1.3 ， JavaScript 的 内 部 对 象 


JavaScript 的 内 部 对 象 按照 使 用 方式 可 以 分 为 静态 对 象 和 动态 对 象 两 种 。 在 引用 动态 对 象 
的 属性 和 方法 时 ， 必 须 使 用 new 关键 字 来 创建 一 个 对 象 实例 ， 然 后 才能 使 用 “对 象 实例 名 .成 
员 ” 的 方式 来 访问 其 属性 和 方法 ;在 引用 静态 对 象 属性 和 方法 时 ， 不 需要 使 用 new 关键 字 来 
创建 对 象 实例 ， 直 接 使 用 “对 象 名 .成 员 ” 的 方式 来 访问 其 属性 和 方法 。 

JavaScript 中 常见 的 内 部 对 象 如 表 5-1 所 示 。 


表 5-1 
对 象 名 功 能 静态 动态 性 
Object 对 象 使 用 该 对 象 可 以 在 程序 运行 时 为 JavaScript 对 象 随意 添加 | 动态 对 象 
属性 
String 对 象 用 于 处 理 或 格式 化 文本 字符 串 ， 以 及 确定 和 定位 字符 串 中 | 动态 对 象 
的 子 字符 串 
Date 对 象 使 用 Date 对 象 执行 各 种 日 期 和 时 间 的 操作 动态 对 象 
Event 对 象 用 来 表示 JavaScript 的 事件 静态 对 象 
FileSystemObiect 对 象 主要 用 于 实现 文件 操作 功能 动态 对 象 
Drive 对 象 主要 用 于 收集 系统 中 的 物理 或 逻辑 驱动 器 资源 中 的 内 容 动态 对 象 
File 对 象 用 于 获取 服务 器 端 指定 文件 的 相关 属性 静态 对 象 
Folder 对 象 用 于 获取 服务 器 端 指定 文件 的 相关 属性 静态 对 象 


| 


5.2 ”对 象 访问 语句 


在 JavaScript 中 ， 用 于 对 象 访问 的 语句 有 两 种 ， 分 别 是 “for...in” 循 环 语句 和 with 语 
句 。 下 面 详细 介绍 这 两 种 语句 的 用 法 。 


5.2.1 案例 一 一 “for...in” 循 环 语句 


“for.…in” 循 环 语句 和 for 语句 十 分 相似 ， 该 语句 用 来 遍历 对 象 的 每 一 个 属性 。 每 次 都 会 
将 属性 名 作为 字符 串 保 存在 变量 中 。 
“for...in” 语 句 的 语法 格式 如 下 : 


for (variable in object){ 
-. -Statement 
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上 述 语法 中 的 参数 说 明 如 下 。 

e@ “variable: 该 参数 是 一 个 变量 名 ， 声 明 一 个 变量 的 var 语句 、 数 组 的 一 个 元 素 或 者 对 
象 的 一 个 属性 。 

@ ”Object: 该 参数 是 一 个 对 象 名 ， 或 者 是 计算 结果 为 对 象 的 表达 式 。 

e@ statement: 该 参数 通常 是 一 个 原始 语句 或 者 语句 块 ， 由 它 构建 循环 的 主体 。 

【 例 5.1】 (实例 文件 ，ch05\5.1.html)“for...in” 语 句 的 使 用 。 代 码 如 下 : 


<!DOCTYPE> 

<head> 

<title> 使 用 for in 语句 </title> 
</head> 

<body> 

<script type="text/javascript"> 
Var myarray = new Array() 
myarray[0] ey Pap. 


GG 


myarray[1] = "星期 二 " 
myarray[2] = "星期 三 " 
myarray[3] = "星期 四 " 
myarray[4] = "星期 五 " 
myarray[5] = "星期 六 " 
myarray[6] = "星期 日 " 


for (var i in myarray) 

| 

document .write (myarray[i] + "<br />") 
1 

</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-3 所 示 。 
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图 5-3 程序 运行 结果 
5.2.2 ”案例 一 一 with 语句 


有 了 with 语句 ， 在 存 取 对 象 属性 和 方法 时 就 不 用 重复 指定 参考 对 象 ， 在 with 语句 块 中 ， 
凡是 JavaScript 不 识别 的 属性 和 方法 都 和 该 语句 块 指定 的 对 象 有 关 。 
With 语句 的 语法 格式 如 下 : 


with object { 
statements 


} 


对 象 指 明了 当 语 句 组 中 对 象 缺 省 时 的 参考 对 象 ， 这 里 我 们 用 较为 熟悉 的 Document 对 象 对 
with 语句 举例 。 例 如 ， 当 使 用 与 Document 对 象 有 关 的 write( ) 或 writeln( ) 方 法 时 ， 往 往 使 用 
以 下 形式 : 


document .writeln("Hello!™" 


如 果 需 要 显示 大 量 数据 时 ， 就 会 多 次 使 用 同样 的 document.writeln0 语 句 ， 这 时 就 可 以 像 
下 面 的 程序 那样 ， 把 所 有 以 Document 对 象 为 参考 对 象 的 语句 放 到 with 语句 块 中 ， 从 而 达到 
减少 语句 量 的 目的 。 

【 例 5.2】 (实例 文件 ， ch0s\s.2.htmlD)with 语句 的 使 用 。 代 码 如 下 : 


<!DOCTYPE> 
<html> 
<head> 
<title>with 语句 的 使 用 </title> 
</head> 
<body> 
<script type ="text/javascript"> 
Var date time=new Date(); 
with(date time){ 
Var a=getMonth ()+17 
alert (getFullYear ()+" 年 "+a+" 月 "+getDate () +" 日 
"+getHours ()+":"+getMinutes ()+":"+getSeconds () ) 7 
和 
Var date time=new Date(); 
alert (date time .getFullYear()+" 年 "+date time .getMonth()+1+" 月 
"+date time.getDate()+" 日 
"+date time.getHours()+":"+date time.getMinutes()+":"+date time.getSeconds( 
) ) 


全 


</script> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-4 所 示 。 
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5-4 ”程序 运行 结果 


5.3 JavaScript 中 的 数组 
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数组 是 有 序数 据 的 集合 ，JavaScript 中 允许 数组 元 素来 自 不 同 的 数据 类 型 。 用 数组 名 和 下 
标 可 以 唯一 地 确定 数组 中 的 元 素 。 


5.3.1 案例 一 一 创建 和 访问 数组 对 象 


数组 是 具有 相同 数据 类 型 的 变量 集合 ， 这 些 变量 都 可 以 通过 索引 进行 访问 。 数 组 中 的 变 
量 被 称 为 数组 元 素 。 数 组 能 够 容纳 元 素 的 数量 被 称 为 数组 的 长 度 。 数 组 中 的 每 个 元 素 都 具有 
唯一 的 索引 (或 称 为 下 标 ) 与 其 相对 应 。 在 JavaScript 中 数组 的 索引 从 零 开始 。 

Array 对 象 是 常用 的 内 置 动作 脚本 对 象 ， 它 将 数据 存储 在 已 编号 的 属性 中 ， 而 不 是 已 命名 
的 属性 中 。 数 组 元 素 的 名 称 叫 作 索引 。 数 组 用 于 存储 和 检索 特定 类 型 的 信息 ， 例 如 学 生 列表 
或 游戏 中 的 一 系列 元 素 。Array 对 象 类 似 String 和 Date 对 象 ， 需 要 使 用 new 关键 字 和 构造 函 
数 来 创建 。 

可 以 在 创建 一 个 Array 对 象 时 初始 化 它 : 

myArray=new Array() 


myArray=new Array([size]) 
myArray=new Array([element0[,elementl[, ...[, elementN]]]]) 


其 中 各 个 参数 的 含义 如 下 。 

@ size: 可 选 ， 指 定 一 个 整数 表示 数组 的 大 小 ; 

@ “element0,...,elementN”: 可 选 ， 是 要 放 到 数组 中 的 元 素 。 创 建 数组 后 ， 能 够 用 [ ] 
符号 访问 数组 单个 元 素 。 

由 上 述 可 知 ， 创 建 数组 对 象 有 3 种 方法 。 

(1) 新 建 一 个 长 度 为 零 的 数组 ， 格 式 如 下 : 


var 数组 名 =new Array( ); 


例如 ， 声 明 数 组 为 myAr1， 长 度 为 0， 代 码 如 下 : 
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Var myArrl=new Array(); 


(2) 新 建 一 个 长 度 为 n 的 数组 ， 格 式 如 下 : 


var 数组 名 =new Array( mn ); 


例如 ， 声 明 数 组 为 myAr2， 长 度 为 6， 代码 如 下 : 


Var myArr2=new Array (6); 


(3) 新 建 一 个 指定 长 度 的 数组 ， 并 赋值 ， 格 式 如 下 : 


Var 数组 名 =new Array (元 素 1, 元 素 2, 元 素 3，…) 7 


例如 ， 声 明 数 组 为 myArr3， 并 且 分 别 赋值 为 1，2，3，4， 代 码 如 下 : 


Var myArr3=new Array(l1,2,3,4); 


上 述 代 码 ， 创 建 了 一 个 数组 myAr3 ， 并 且 包 含 4 个 元 素 : myAr3[0]、myAr3[1]、 
myAnr3[2]、myAr3[3]， 这 4 个 元 素 值 分 别 为 1、2、3、4。 
| 【 例 5.3】 (实例 文件 ，ch05\5.3.html) 构 造 一 个 长 度 为 五 的 数组 ， 为 其 添加 元 素 后 ， 使 用 
for 循环 语句 枚 举 其 元 素 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
\| <head> 
NS\ <script language=JavaScript> 
myArray=new Array(5); 
myArray[0]="a"; 
myArray[1] 
myArray[2] ? 
myArray[3]="d"; 
myArray[4]="e"; 
Or 一 D3 和 << S93 主攻 
document .write (myArray [i]+"<br>"); 
3 
</script> 
<META content="MSHTML 6.00.2900.5726" name=GENERATOR> 
</head> 
<body> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-5 所 示 。 
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只 要 构造 了 一 个 数组 ， 就 可 以 使 用 [ ]， 通 过 索引 和 位 置 ( 它 也 是 基于 0 的 ) 来 访问 它 的 元 
素 。 每 个 数组 对 象 实体 都 可 被 看 作 是 一 个 对 象 ， 因 为 每 个 数组 都 是 由 它 所 包含 的 若干 个 数组 
元 素 组 成 的 ;每 个 数组 元 素 都 可 被 看 作 是 这 个 数组 对 象 的 一 个 属性 ， 用 表示 数组 元 素 位 置 的 
数字 来 标识 。 也 就 是 说 ， 数 组 对 象 使 用 数组 元 素 的 下 标 来 进行 区 分 ， 数 组 元 素 的 下 标 从 零 开 
始 索引 ， 第 一 个 下 标 为 0， 后面 依次 加 1。 访 问 数据 的 语法 格式 如 下 : 


document .write (mycars[0]) 


【 例 5.4】 (实例 文件 : ch05\5.4.html) 使 用 方 括号 访问 并 直接 构造 数组 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<script language=JavaScript> 
mArray=tI al pl"cl"lal"a2" "De" co2"] I a bd" co ll 
for (var i=0; i <= 2; i++){ 
document .write( myArray[i]) 
document .write ("<br>"); 


} 
document .write("<hr>"); 
for (i=0;i<3;i++){ 
for (j=0;j<3;j++){ 
document .write (myArray[i] [j]+" "); 
} 
document .write ("<br>"); 
} 
</script> 
<META content="MSHTML 6.00.2900.5726" name=GENERATOR> 
</head> 
<body> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-6 所 示 。 
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图 5-6 ”访问 构造 的 数组 


5.3.2 案例 一 一 使 用 “for...in” 语 句 控制 数组 


在 JavaScript 中 使 用 “for...in” 语 句 来 控制 循环 输出 数组 中 的 元 素 ， 且 不 需要 事先 知道 对 
象 属性 的 个 数 。 其 具体 的 语法 格式 为 : for (key in myArray)。 其 中 ，myArray 表示 数组 名 。 


过 
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【 例 5.5】 (实例 文件 ，ch05\5.5.html)“for...in” 语 句 的 使 用 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<script language=JavaSsScript> 
myArray=new Array(5); 
myArray[0]="a"; 
myArray[1]="b"; 
myArray[2]="c"; 
myArray[3]="d"; 
myArray[4]="e"; 
for (key in myArray){ 
document .write (myArray [key]+"<br>"); 
} 
</script> 
<META content="MSHTML 6.00.2900.5726" name=GENERATOR> 
</head> 
<body> 
</body> 
</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 5-7 所 示 。 
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人 
d 
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5-7 ”循环 输出 数组 中 的 数据 


5.3.3 “案例 一 一 Array 对 象 的 常用 属性 和 方法 


JavaScript 提供 了 一 个 Array 内 部 对 象 来 创建 数组 ， 通 过 调用 Array 对 象 的 各 种 方法 ， 可 
以 方便 地 对 数组 进行 排序 、 删 除 、 合 并 等 操作 。 

1. Array 对 象 常用 的 属性 

Array 对 象 的 属性 有 两 个 ， 分 别 是 length 属性 和 prototype 属性 。 

(1) length 属性 。 

该 属性 的 作用 是 指定 数组 中 元 素数 量 的 非 从 零 开 始 的 整数 。 当 将 新 元 素 添 加 到 数组 中 
时 ， 此 属性 会 自动 更 新 。 其 语法 格式 为 : my_array.length。 

【 例 5.6】 (实例 文件 : ch0s\s.6.htmD) 更 新 length 属性 。 代 码 如 下 : 


<!IDOCTYPE HTML> 
<html> 


Gi 


第 
<head> a 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 章 
<script language=JavaScript> el 
my array = new Array(); 由 
document .write (my array.length+"<br>"); // 初始 长 度 为 0 本 
my array[0] = "a'7 El 
document .write (my array.length+"<br>"); // 将 长 度 更 新 为 1 :| 
my_array[1] = 'b'; 到 
document .write (my array.length+"<br>"); // 将 长 度 更 新 为 2 基 
my_array[9] = 'c'; 础 
document .write (my array.length+"<br>"); // 将 长 度 更 新 为 10 | 
</script> 对 
</head> 象 
<body> 本 
</body> 数 
</html> 组 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-8 所 示 。 


刁 | DA(tB\5.6.html PD ~ © X | 车 px 源 代 码 \5.6.html 


pS 


文件 (D。 编 志 (5) 查看 (V) ”收藏 突 (A) 工具 (T) 帮助 (H) 


图 5-8 给 数组 指定 相应 的 整数 


(2) prototype 属性 。 

该 属性 是 所 有 JavaScript 对 象 所 共有 的 属性 ， 和 Date 对 象 的 prototype 属性 一 样 ， 其 作用 
是 将 新 定义 的 属性 或 方法 添加 到 Array 对 象 中 ， 从 而 使 该 对 象 的 实例 能 够 调用 该 属性 或 方 
法 。 其 语法 格式 为 : Array.prototype.methodName=functionName。 

其 中 ， 各 个 参数 含义 如 下 。 

e@ ”methodName: 必 选 项 ， 新 增 方法 的 名 称 。 

e@ ”functionName: 必 选 项 ， 要 添加 到 对 象 中 的 函数 名 称 。 


【 例 5.7】 (实例 文件 ，ch05\5.7.html) 为 Array 象 添加 返回 数组 中 最 大 元 素 值 的 方法 ， 
且 必 须 声明 该 函数 ， 并 将 它 加 入 Array.prototype， 并 使 用 它 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<script> 
// 添 加 一 个 属性 ， 用 于 统计 删除 的 元 素 个 数 
Array.prototype.removed=0; 


// 添 加 一 个 方法 ， 用 于 删除 指定 索引 的 元 素 
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Array.prototype.removeAt=function (index) 
{ 
if(isNaN(index) ||index<0) 
{return false;} 
if (index>=this.length) 
{inde: his.length-—1} 
Eor (Var i=index;i<this.length;i++) 


{ 


this[i]=this[i+1]; 
} 
this.length-=1 
this.removed++; 


} 
// 添 加 一 个 方法 ， 输 出 数组 中 的 全 部 数据 
Array.prototype.outPut=function (sp) 
{ 
forl(var i=0;i<this.length;i++) 
{ 
document .write (this([i]); 
document .write (sp); 
} 


document .write("<br>"); 


} 
过 // 定 义 数组 
\ Var arr=new Array(l,2,3,4,5,6,7,8,9); 
// 测 试 添加 的 方法 和 属性 
arr.outPut(™ "); 
document .write ("删除 一 个 数据 <br>") 昌 
arr.removeAt (2) 7 
arr.outPut(" "); 
arr.removeAt (4); 
document .write ("删除 一 个 数据 <br>"); 
arr.outPut(" ") 
document .write ("一 共 删 除了 "+arr .removed+" 个 数据 ") ; 
</3cript> 
</head> 
<body> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-9 所 示 。 
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删除 一 个 数据 
1245789 
一 共 删 除了 2 个 数据 


5-9 显示 效果 
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这 段 代 码 利用 prototype 属性 分 别 向 Array 对 象 中 添加 了 两 个 方法 和 一 个 属性 ， 分 别 实现 
了 删除 指定 索引 处 的 元 素 、 输 出 数组 中 的 所 有 元 素 和 统计 删除 元 素 个 数 的 功能 。 

2. Array 对 象 常用 的 方法 

Array 对 象 常用 的 方法 有 连接 方法 concat、 分 隔 方法 join、 追 加 方法 push、 倒 转 方法 
Teverse、 切 片 方法 slice 等 。 

(1) concat 方法 。 

该 方法 的 作用 是 把 当前 数组 和 指定 的 数组 连接 起 来 ， 返 回 一 个 新 的 数组 ， 且 该 数组 中 含 
有 前 面 两 个 数组 的 全 部 元 素 ， 其 长 度 为 两 个 数组 的 长 度 之 和 。 其 基本 的 语法 格式 为 
arrayl.concat (array2)。 其 中 各 参数 的 含义 如 下 。 

@ array1: 必 选 项 ， 数 组 名 称 。 

@ armay2: 必 选 项 ， 数 组 名 称 ， 该 数组 中 的 元 素 将 被 添加 到 数组 arrayl 中 。 

【 例 5.8】 (实例 文件 : ch05\5.8.html) 定 义 两 个 数组 arrayl 和 array2， 然 后 把 这 两 个 数组 
连接 并 将 值 赋 给 数组 array。 代 码 如 下 : 

<!DOCTYPE HTML> 

<html> 

<head> 

<META http-equiv=Content-Type content="text/html; charset=gb2312"> 

<script language=JavaScript> 


Var arrayl=new Array(l,2,3,4,5,6); 
Var array2=new Array(7,8,9,10); 
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Var array=arrayl.concat (array2); 
// 自 定义 函数 ， 输 出 数组 中 所 有 数据 
function writeArr (arrname sp) 
{ 
for (var i=0;i<arrname.length;i++) 
{ 
document .write (arrname [i]); 
document .write (sp); 
1 
document .write ("<br>") 7 
上 
document .write(" 数 组 1: "); 
writeArr (arrayl, ","); 
document .write ("数组 2: "); 
writeArr (array2,","); 
document .write ("数组 3: "); 
writeArr (array, ","); 
</script> 
</head> 
<body> 
</body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 5-10 所 示 。 


103@ 


人 。 JavaScript 动态 网 站 开发 
: 案例 课堂 >… 


数组 1: 1,2,3,4,5,6, 
数组 2: 7, 6, 9, 10， 
数组 3: 1,2,3,4,5,6,7,8,9, 10, 


图 5-10 链接 数组 

(2) join 方 法 。 

该 方法 与 String 对 象 的 split 方法 的 作用 相反 ， 该 方法 的 作用 是 将 数组 中 所 有 元 素 连 接 成 
一 个 字符 串 。 如 果 数 组 中 的 元 素 不 是 字符 串 ， 则 该 元 素 将 首先 被 转化 为 字符 串 ， 且 各 个 元 素 
之 间 将 以 指定 的 分 隔 符 进行 连接 。 其 语法 格式 为 : arrayjion(separatonD) 。 其 中 ，array( 必 选项 ， 
数组 的 名 称 )， 而 separator( 必 选项 ， 连 接 各 个 元 素 之 间 的 分 隔 符 )。 

【 例 5.9】 (实例 文件 : ch05\5.9.html) 对 比 split 方法 和 jion 方法 。 代 码 如 下 : 


<!DOCTYPE HTML> 
Se <html> 
NC <head> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<script language=JavaScript> 
Var strl="this ia a test"; 
var arr=strl.split(" "); 
var str2=arr.join(","); 
with(document){ 
write(strl); 
write ("<br> 分 割 为 数组 ， 数 组 长 度 "+arr .length+", 重新 连接 如 下 : <br>"); 
write (str2); 
} 
</script> 
</head> 
<body> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-11 所 示 。 
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this ia a test 
分 割 为 数组 ， 数 组 长 度 4, 重新 连接 如 下 


this, ia a, test 


图 5-11 显示 效果 
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上 述 代码 首先 使 用 split 方法 以 空格 为 分 隔 符 将 字符 串 分 割 存储 到 数组 中 ， 再 调用 join 方 
法 以 逗号 为 分 隔 符 ， 将 数组 中 的 各 个 元 素 重新 连接 为 一 个 新 字符 串 。 

(3) push 方法 。 

该 方法 可 以 将 所 指定 的 一 个 或 多 个 数据 添加 到 数组 中 ， 该 方法 的 返回 值 为 添加 新 数据 后 
数组 的 长 度 。 其 语法 格式 为 array.push([datal[,data2[,.….[.datan]]]])。 其 中 ， 各 参数 的 含义 
如 下 。 

@ array: 必 选 项 ， 数 组 名 称 。 

@ datal 、data2、datan: 可 选 参数 ， 将 被 添加 到 数组 中 的 数据 。 

【 例 5.10】 (实例 文件 : ch05\S.10.htmD) 利 用 push 方法 向 数组 中 添加 新 数据 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<script language= a 
Var arr=new Array() 
document .write (" 向 数组 中 写 入 数据 : "); // 单 个 数据 写 入 数组 
for (Var i=1;i<=5;i++) 
{ 
Var data=arr.push (Math.ceil (Math.random()*10)); 
document .write (data); 
document .write ("个 ， A 放 
} 
document .write ("<br>");// 批 量 写 入 数组 
Var data=arr.push("a",4.15, "hello"); 
document .write ("批量 写 入 ， 数 组 长 度 已 为 "+data+"<br>"); 
Var newarr=new Array(l1,2,3,4,5); 
document .write(" 向 数组 中 写 入 另 一 个 数组 <br>") ; // 写 入 新 数组 
arr.push (newarr); 
document .write (" 全 部 数据 如 下 :<br>") ; 
document .write (arr.join(",")); 
</seript> 
</head> 
<body> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-12 所 示 。 上 述 代 码 分 别 使 用 push 方法 ， 向 
数组 中 逐个 和 批量 添加 数据 。 


散 炎 灯 凤 涯 一 一 剖 导 串 广 1duoSeAer_ 节 5 小 


IGG 


DP mera p- EEC * 
文件 由。 六 后 (E) 梧 天 IV】 收 富 (A) 工兵] 

向 数组 中 写 入 数据 : 1 个 , 2 个 ,3 个 ， 和 a, 

批量 写 入 ， 孝 组 长 度 己 为 8 

和 个 数组 


10, 1, 3, 3, 1, a,44 15, hello 1,2, 3,4,5 


5-12 ”使 用 push 方法 向 数组 添加 数据 的 效果 
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(4) reverse 方法 。 

该 方法 可 以 将 数组 中 的 元 素 反 序 排列 ， 数 组 中 所 包含 的 内 容 和 数组 的 长 度 不 会 改变 。 其 
语法 格式 为 : array.reverse()。 其 中 array 为 数组 的 名 称 。 

【 例 5.11】 (实例 文件 : ch0s\s.11.htmD 将 数组 中 的 元 素 反 序 排列 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<script> 
Var arr=new Array(l,2,3,4,5,6); 
with (document) 


{ 
write ("数组 为 :") ; 
writel(arr.join(",")); 
arr.reverse(); 
write ("<br> 反 序 后 的 数组 为 :") 
《EEC =—") Ys 
} 
</script> 
</head> 
<body> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-13 所 示 。 
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数组 为 :1, 2, 3, 4, 5, 6 
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(5) slice 方法 。 
该 方法 将 提取 数组 中 的 一 个 片段 或 子 字符 串 ， 并 将 其 作为 新 数组 返回 ， 且 不 修改 原始 数 
组 。 返 回 的 数组 包括 start 元 素 到 end 元 素 (但 不 包括 该 元 素 ) 的 所 有 元 素 。 
其 语法 格式 为 : my_array.slice( [ start [ ,end ] ] )。 其 中 各 个 参数 的 含义 如 下 。 
e@ start: 指定 片段 起 始点 索引 的 数字 。 
e@ ”end: 指定 片段 终点 索引 的 数字 。 如 果 省 略 此 参数 ， 则 片段 包括 数组 中 从 开头 start 到 
结尾 的 所 有 元 素 。 
【 例 5.12】 (实例 文件 ，ch05\5.12.html) 将 数组 中 的 一 个 片段 或 子 字 符 串 作 为 新 数组 返 
且 不 修改 原始 数组 。 代 码 如 下 : 


<!1DOCTYPE HTML> 
<html> 


回 


全 10 
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<head> 

<META http-equiv=Content-Type content="text/html; charset=gb2312"> 

<Script language="JavasScript"> 
Var myArray = [1l, 2, 3, 4, 5, 6,7]; 
newArray = myArray.slice(l, 6); 
document .write (newArray); 
document .write ("<br>"); 
newArray = myArray.slice(1); 
document .write (newArray); 

</script> 

</head> 

<body> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-14 所 示 。 NN 
ee oo ans NN 
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(6) sort 方法 。 
该 方法 对 数组 中 的 所 有 元 素 按 Unicode 编码 进行 排序 ， 并 返回 经 过 排序 后 的 数组 。sort 方 
法 默认 按 升序 进行 排列 ， 但 也 可 以 通过 指定 对 比 函 数 来 实现 特殊 的 排序 要 求 。 对 比 函数 的 格 
式 为 : comparefunction(argl,arg2)。 其 中 ，comparefunction 为 排序 函数 的 名 称 。 该 函数 必须 包 
含 两 个 参数 argl 和 arg2， 分 别 代 表 了 两 个 将 要 进行 对 比 的 字符 。 该 函数 的 返回 值 决定 了 如 何 
对 argl 和 arg2 进行 排序 。 如 果 返 回 值 为 负 ， 则 arg2 将 排 在 argl 的 后 面 ， 返回 值 为 0，arg1、 
arg2 时 视 为 相等 ， 返 回 值 为 正 时 ， 表 示 arg2 将 排 在 argl 的 前 面 。 
sort 方法 的 语法 格式 为 :array.sort([cmpfun(argl1,arg2)])。 各 参数 的 含义 如 下 。 
@ array: 必 选 项 ， 数 组 名 称 。 
e cmpfun: 可 选项 ， 比 较 函 数 。 
@ argl，arg2: 可 选项 ， 比 较 函 数 的 两 个 参数 。 
【 例 5.13】 (实例 文件 ，ch05\5.13.htmDD) 使 用 sort 方法 对 数组 中 的 数据 进行 排序 。 代 码 如 下 : 
<!DOCTYPE HTML> 
<html> 
<head> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<Script language="JavaSscript"> 
Var arr=new Array(1,6,3,40,1,"a","b", "A",“B"); 
writeArr ("排序 前 ", arr); 


writeArr ("升序 排列 ", arr.sort()); 
writeArr ("降序 排列 , 字母 不 分 大 小 写 ", arr.sort (desc)); 
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writeArr (" 严 格 降序 排列 ",arr.sort (desc1)); 
// 自 定义 函数 输出 提示 信息 和 数组 元 素 
function writeArr(str,array) 
document .write(str+":"); 
document .write(array.join(",")); 
document .write("<br>"); 


} 
// 按 降序 排列 , 字母 不 区 分 大 小 写 
function desc(arb) 
{ 
Var a=new String(a); 
Var b=new String(b); 
// 如 果 a 大 于 b， 则 返回 -1， 所 以 a 排 在 前 b 排 在 后 


return -1l*a.localeCompare(b) ; 


} 
// 严 格 降序 
\ function descl (a,b) 
| { 
var stra=new String(a); 
Se Var strb=new String(b); 
Xe Var ai=stra.charCodeAt (0); 
\ Var bi=strb.charCodeAt (0) 7 
| if( ai>bi ) 
| return =1? 
else 
return 1; 
} 
</script> 
</head> 
<body> 
</body> 
</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 5-15 所 示 。 这 段 代码 中 定义 了 两 个 对 比 函 
数 ， 其 中 dese 定义 降序 排列 ， 但 字母 不 区 分 大 小 写 ;: descl 定义 严格 降序 排列 。 


站 DAR 到 \5.13.htr DD ~ G X | 局 cA 涯 RN5.13henl x 
文件 (了 演 生 (5) ”查看 (V) 收藏 夫 (A) 工具 (D 。 帮 动 (H) 
排序 前 :1 6, 3, 40, 1, a, b, A,B 
升序 排列 :1, 1, 3, 40, 6, 4, B, a,b 
降序 排列 , 字母 不 分 大 小 写 :B, b, A, a, 6, 40, 3, 1, 1 
总 


严格 降序 排列 :b, a, B, A, 6, 40, 3, 1, 1 


图 5-15 对 数组 进行 排序 后 的 效果 
(7) splice 方法 。 
该 方法 通过 指定 起 始 索引 和 数据 个 数 ， 删 除 或 蔡 换 数组 中 的 部 分 数据 。 该 方法 的 返回 值 
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为 被 删除 或 蔡 换 掉 的 数据 。 其 语法 格式 为 array.splice(startcount[.datal[,data2,[… 
[datacount]]]])。 其 中 ， 各 参数 的 含义 如 下 。 

array: 必 选 项 ， 数 组 名 称 。 

start: 必 选 项 ， 整 数 ， 起 始 索引 。 

count: 必 选 项 ， 整 数 ， 要 删除 或 蔡 换 的 数组 的 个 数 。 

data: 可 选项 ， 用 于 蔡 换 指定 数据 的 新 数据 。 

如 果 没 有 指定 data 参数 ， 则 该 指定 的 数据 将 被 删除 ， 如 果 指 定 了 data 参数 ， 则 数组 中 的 


数据 将 被 蔡 换 。 
【 例 5.14】 (实例 文件 ，ch05\5.14.html) 上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 5-16 


所 示 。 使 用 splice 方法 蔡 换 和 删除 数组 中 指定 数目 的 数据 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<Script language="JavaScript"> 
Var arr=new Array(0,1,2,3,4,5,6,7,8,9,10); 
Var rewith=new Array ("a","b","c"); 
Var tmpl=arr.splice(2,5,rewith); 
with (document) 


{ 
writeArr ("替换 了 5 个 数据 ", tmp1); 
writeArr ("替换 为 : ",rewith); 
writeArr ("替换 后 ", arr); 
Var tmp2=arr.splice(5,2); 
writeArr ("删除 2 个 数据 "， pl 及 
writeRrr ("替换 后 ", arr); 
// 自 定义 函数 输出 提示 信 各 各 玫 组 元 素 ” 
function writeArr(str,array) 
{ 
document .write(str+":"); 
document .write(array.join(",")); 
document .write("<br>"); 
} 
</script> 
</head> 
<body> 
</body> 
</html> 


卜 流 灯 难 兰 一 一 主 朵 中型 1duoSener 节 S 小 下 


全 全 人 DARRA\S Ahr P - OX| Govsremsiahml x 


文件 吕 。 策 二 (日 家 看 IV】 收 蒙 关 (A】 工具 (T) 才 动 (H) 


生生 3,4,5,6 
普 换 为 : 
0 
数据 :9 


删除 2 个 : 
Ei 


5-16 ”显示 效果 
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5.4 详解 常用 的 数组 对 象 方法 


在 JavaScript 中 ， 使 用 数组 对 象 的 方法 有 14 种 。 下 面 将 详细 介绍 常用 的 数组 对 象 方法 的 
使 用 。 


5.4.1 案例 一 一 连接 其 他 数组 到 当前 数组 


使 用 concat0 方 法 可 以 连接 两 个 或 多 个 数组 。 该 方法 不 会 改变 现 有 的 数组 ， 只 是 返回 被 连 
接 数 组 的 一 个 副本 。 其 语法 格式 如 下 : 


arrayObject.concat (arrayl,array2,...,arrayN) 


其 中 arrayN 是 必 选 项 ， 该 参数 可 以 是 具体 的 值 ， 也 可 以 是 数组 对 象 ， 可 以 是 任意 多 个 。 
【 例 5.15】 (实例 文件 : ch0S\5.15.html) 使 用 concat0 方 法 连接 3 个 数组 。 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 
Var arr = new Array (3) 


\ arr[0] = "北京 " 

a 
arc ft2 和 = 中" 记 州 EF 
Var arr2 = new Array(3) 
arr2[0] = "西安 " 
arr2[1] = "天 津 " 
arr2[2] = "杭州 " 
Var arr3 = new Array(2) 
arr3[0] = "长 沙 " 
arr3[1] = "温州 " 
document .write (arr.concat (arr2,arr3)) 

</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-17 所 示 。 


人 | HAUsersAdminist PD ~ OG X | @ HAUsers\Administr.. x 


文件 (F) ” 沪 辑 (E) 。 豆 看 (V) 收藏 夫 (A) ”工具 (T) 。 帮助 (H) 


北京 ,上 海 , 广州, 西安, 天 津 , 杭州 , 长 沙 , 温州 


5-17 ”程序 运行 结果 
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5.4.2 ”案例 一 一 将 数组 元 素 连 接 为 字符 串 
使 用 join0 方 法 可 以 把 数组 中 的 所 有 元 素 放 入 一 个 字符 串 。 其 语法 格式 如 下 : 


arrayObject .join (separator) 


其 中 separator 为 可 选项 ， 用 于 指定 要 使 用 的 分 隔 符 。 如 果 省 略 该 参数 ， 则 使 用 逗号 作为 
分 隔 符 。 

【 例 5.16】 (实例 文件 ，ch0s\5.16.html) 使 用 join() 方 法 将 数组 元 素 连接 为 字符 串 。 代 码 
如 下 : 


<html> 

<body> 

<script type="text/javascript"> 
Var arr = new Array(3); 
arr[0] ee | 
arr[1] wh EE 
arr[2] "廊坊 " 
document .write (arr.join()); 
document .write ("<br />"); 
document .write (arr.join(".")); 

</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-18 所 示 。 


全 了 和 HAUsers\Administ PD - O X | @ HAuserswAdministr。x 


文件 (月 映 缠 (E) 豆 看 (V) 收 项 交 (A) 工具 (T 才 助 (H) 
河北 , 石家庄 , 廊坊 


河北 .石家庄 . 廊坊 


图 5-18 程序 运行 结果 
5.4.3 ”案例 一 一 移 除数 组 中 最 后 一 个 元 素 
使 用 pop0 方 法 可 以 移 除 并 返回 数组 中 最 后 一 个 元 素 。 其 语法 格式 如 下 : 


arrayObject .pop() 


Se pop0 方 法 将 移 除 arrayObject 的 最 后 一 个 元 素 ， 把 数组 长 度 减 1， 并 且 返 回 它 


2 
半 移 除 的 元 素 的 值 。 如 果 数 组 本 身 为 空 ， 则 pop0 不 改变 数组 ， 此 时 返回 的 值 为 
undefined。 
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【 例 5.17】 (实例 文件 ，ch05\5.17.html) 使 用 pop 0 方法 移 除数 组 中 的 最 后 一 个 元 素 。 代 
码 如 下 : 


<html> 

<html> 

<body> 

<script type="text/javascript"> 
Var arr = new Rrray(3) 


arr[0] = "河南 " 
arr[1] = "郑州 " 
arr[2] = "洛阳 " 


document .write (" 数 组 中 原 有 元 素 : "+arr) 
document .write("<br />") 
document .write ("被 移 除 的 元 素 : "+arr .pop()) 
document .write("<br />") 
document .write (" 移 除 元 素 后 的 数组 元 素 : "+arr) 
</script> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-19 所 示 。 


ee Brrr Er 


文 伯 站 妨 红 E) 而 看 (Vi 攻 芋 天 A) 工具 Mm 大 翅 ) 


数组 中 原 有 元 素 ， 河 南 , 郑 和 洛阳 
被 黎 除 的 元 村 
物 阵 元 素 后 的 数组 元 素 ， 河 隔 , 郑州 


图 5-19 程序 运行 结果 


5.4.4 ”案例 一 一 将 指定 的 数值 添加 到 数组 中 


使 用 push0 方 法 可 向 数组 的 末尾 添加 一 个 或 多 个 元 素 ， 并 返回 新 的 长 度 。 其 语法 格式 
如 下 : 


arrayObject .push (newelementl],newelement2, ...,newelementN) 


其 中 ，arrayObject 为 必 选 项 ， 该 参数 为 数组 对 象 。newelementl 为 可 选项 ， 表 示 添 加 到 数 
组 中 的 元 素 。 


Sm pushO 方 法 可 把 它 的 参数 顺序 添加 到 arrayObject 的 尾部 。 它 直接 修改 
站 arrayObject， 而 不 是 创建 一 个 新 的 数组 。push() 方 法 和 pop0) 方 法 使 用 数组 提供 的 


“先进 后 出 栈 ” 的 功能 。 
【 例 5.18】 (实例 文件 ，ch05\5.18.html) 使 用 push 0 方法 将 指定 数值 添加 到 数组 中 。 代 码 
如 下 : 


<html> 
<body> 
<script type="text/javascript"> 


Var arr = new Rrray(3) 


arr[0] = "河南 " 
arr[1] = "河北 " 
aeT2iE< 汪 苏 = 


document .write(" 原 有 的 数组 元 素 : "+arr) 
document .write ("”<br />") 
document .write ("添加 元 素 后 数组 的 长 度 : ”+arr.pPush ("吉林 ") ) 
document .write ("<br />") 
document .write ("添加 数值 后 的 数组 : " +arr) 

/oript> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-20 所 示 。 


en cn" 


CD en o ~ ox | userswarinise. «| 
文件 (站 燃 强 (E)】 查看 (V)】 。 收 功 交 (A) 工具 (T) 才 助 (H) | 
原 有 的 数组 元 素 ， 河 南 , 河北 ,江苏 

| 元 素 后 数 颖 


沃 加 元 素 后 数 :4 
添加 数值 后 的 数组 ,河南 ,河北 ,江苏 , 吉林 


图 5-20 程序 运行 结果 
5.4.5 ”案例 一 一 反 序 排列 数组 中 的 元 素 
使 用 reverse() 方 法 可 以 颠倒 数组 中 元 素 的 顺序 。 其 语法 格式 如 下 : 


arrayObject .reverse() 


该 方法 会 改变 原来 的 数组 ， 而 不 会 创建 新 的 数组 。 
【 例 5.19】 (实例 文件 ，ch05\5.19.html) 使 用 reverse () 方 法 颠倒 数组 中 的 元 素 顺序 。 代 码 
如 下 : 


<html> 
<body> 
<script type="text/javascript"> 
Var arr = new Array (3) 
下 一 人 


arr[1] = " 李 四 " 
BFTETZ2 = 
document .write (arr + "<br />") 
document .write (arr.reverse()) 
</script> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-21 所 示 。 
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是 HAUserswdmwist P = © Xsersedminee 
文 汪 月 。 演 请 [E) 至 吾 (V) 。 煌 大 二 IA) 工 琴 人 T) 大 才 (Hj 


张 三 , 李 四 , 王 五 


王 五 , 李 四 , 张 三 


图 5-21 程序 运行 结果 
5.4.6 ”案例 一 一 删除 数组 中 的 第 一 个 元 素 


使 用 shifi0 方 法 可 以 把 数组 中 的 第 一 个 元 素 从 数组 中 删除 ， 并 返回 第 一 个 元 素 的 值 。 其 语 
法 格式 如 下 : 


arrayObject.shift() 


其 中 ，arrayObject 为 必 选 项 ， 是 数组 对 象 。 


所 en 如 果 数 组 是 空 的， 那么 shift0 方 法 将 不 进行 任何 操作 ， 返 回 的 值 为 
Re 慌 。 undefined。 注 意 ， 该 方法 不 创建 新 数组 ， 而 是 直接 修改 原 有 的 arrayObject。 
~ | 【 例 5.20】 (实例 文件 ，ch05\5.20.htmD) 使 用 shift 0 方法 删除 数组 中 的 第 一 个 元 素 。 代 码 
如下: 
<html> 
<body> 


<script type="text/javascript"> 
Var arr = new Array(4) 


aeT0 三 北京 = 
arr[1] = "上 海 " 
arci2i 和 州 有 
arr[3] = "天 津 " 


document .write (" 原 有 数组 元 素 为 : "+arr) 
document .write ("<br />") 
document .write ("删除 数组 中 的 第 一 个 元 素 为 : "+arr. shift ()) 
document .write("<br />") 
document .write ("删除 元 素 后 的 数组 为 : "+arr) 
</script> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-22 所 示 。 


加 | 加 kwuserwdmnia p = © x 本 hauceewamirner- 
六 位 站” 顽 沪 (FE) 豆 矢 (V) 农 守信 | 工 员 人 T 大 风 (H) 


后 有 数组 元 素 为 北京, 上 海 , 广州 ,天津 


删除 教 组 中 的 第 一 个 元 案 为 ， 北 京 
出 珠 元 委 后 的 妆 组 为 ， 上 混 : 广 州 天 汝 
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5.4.7 ”案例 一 一 获取 数组 中 的 一 部 分 数据 
使 用 slice0 方 法 可 从 已 有 的 数组 中 返回 选 定 的 元 素 。 其 语法 格式 如 下 : 


arrayObject.slice(start,end) 


其 中 ，arrayObject 为 必 选 项 ， 为 数组 对 象 ，start 为 必 选 项 ， 表 示 开 始 元 素 的 位 置 ， 是 从 0 
开始 计算 的 索引 。end 为 可 选项 ， 表 示 结 束 元 素 的 位 置 ， 也 是 从 0 开始 计算 的 索引 。 
【 例 $5.21】 (实例 文件 : ch05\5.21.html) 使 用 slice 0 方法 获取 数据 中 的 一 部 分 数据 。 代 码 


禾 炎 灯 凤 当 一 一 训 朵 串 末 duoSeAer 山 9 小 鲁 


如 下 : 

<html> 

<body> 

<script type="text/javascript"> 
Var arr = new Array(6) 
arr[0] = "黑龙 江 " 
arr[1] = ”吉林 " 
arr[2] = "辽宁 " 
arr[3] = "内 蒙古 " 
arr[4] = "河北 " 
arr[5] = "山东 " 


document . write (" 原 有 数组 元 素 : Warr 
document .write("<br />") 
document .write ("获取 的 部 分 数组 元 素 : "+arr.slice (2, 4)) 
document .write("<br />") 
document .write ("获取 部 分 元 素 后 的 数据 : "+arr) 
</script> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-23 所 示 ， 可 以 看 出 获取 部 分 数组 元 素 后 的 数 
组 其 前 后 情况 是 不 变 的 。 


EEC Breranii.. "| 
文人 站 注入 (E) 到 要 Vi 交大 <(A) 工 呈 站 ”区 


原 有 数组 元 素 ， 黑 龙 江 , 吉林 , 辽宁 , 内 察 古 ,河北 , 山东 


a 辽宁 ,内 蒙古 
后 的 数据 ， 黑龙 江 , 吉林 , 辽宁 , 内 蒙古 ,河北 , 山东 


图 5-23 ”程序 运行 结果 


5.4.8 ”案例 一 一 对 数组 中 的 元 素 进行 排序 
使 用 sort0 方 法 可 以 对 数组 的 元 素 进行 排序 。 其 语法 格式 如 下 : 


arrayObject.sort (sortby) 


其 中 ，arrayObject 为 必 选 项 ， 为 数组 对 象 。sortby 为 可 选项 ， 用 来 确定 元 素 顺序 的 函数 的 
名 称 。 如 果 该 参数 被 省 略 ， 那 么 元 素 将 按照 ASCII 字符 顺序 进行 升序 排序 。 


二 
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【 例 5.22】 (实例 文件 ，ch05\5.22.html) 新 建 数组 x 并 赋值 1、20、8、12、6、7， 使 用 
sort 方法 排序 数组 ， 并 输出 x 数组 到 页 面 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 数 组 排序 </title> 

<script type="text/javascript"> 

var x=new Array (1,20,8,12,6,7);  // 创 建 数组 

document .write ("排序 前 数组 :"+x.join(",")+"<p>"); // 输 出 数组 元 素 

x.sort ();  ”// 按 字符 升序 排列 数组 

ee ("没有 使 用 比较 函数 排序 后 数组 :"+x.join(",")+"<p>");  // 输 出 排序 


zx.sort (asc); // 有 比较 函数 的 升序 排列 

/* 升 序 比 较 函 数 */ 

function asc(arb) 

{ 

return a-b; 

} 

document .write ("排序 升序 后 数组 : "+x. join("v")+"<p>") ;// 输 出 排序 后 数组 
x.sort (des); // 有 比较 函数 的 降序 排列 

/* 降 序 比 较 函 数 */ 

function des(a,b) 


{ 


后 


return b-a; 

} 
document .write ("排序 降序 后 数组 :"+x .join(",") ) ; // 输 出 排序 后 数组 
</script> 
</head> 
<body> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-24 所 示 。 
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排序 前 数组 :1, 20, 8, 12, 6,7 

浪 有 使 用 比较 函数 排序 后 数组 :1, 12, 20, 6, 7, 8 
排序 升序 后 数组 :1, 6, 7, 8 12, 20 
排序 降序 后 数组 :20, 12, 8, 7, 6, 1 


图 5-24 ”程序 运行 结果 


在 没有 使 用 比较 函数 进行 排序 时 ，sort 方法 是 按 字 符 的 ASCII 值 排 序 ， 先 从 第 一 个 字符 
比较 ， 如 果 第 1 个 字符 相等 ， 再 比较 第 2 个 字符 ， 依 此 类 推 。 

对 于 数值 型 数据 ， 如 果 按 字符 比较 ， 得 到 的 结果 并 不 是 用 户 所 需要 的 ， 因 此 需要 借助 比 
较 函 数 。 比 较 函 数 有 两 个 参数 ， 分 别 代表 每 次 排序 时 的 两 个 数组 项 。sort0 排 序 时 每 次 比较 两 
个 数组 项 都 会 执行 这 个 参数 ， 并 把 两 个 比较 的 数组 项 作为 参数 传递 给 这 个 函数 。 当 函数 返回 
值 大 于 0 的 时 候 就 交换 两 个 数组 的 顺序 ， 否 则 就 不 交换 ， 即 当 函 数 返回 值 小 于 0 时 ， 表 示 升 
序 排 列 ， 函 数 返 回 值 大 于 0 时 ， 表 示 降 序 排列 。 


a 


5.4.9 ”案例 一 一 将 数组 转换 成 字符 串 
使 用 toString0 方 法 可 把 数组 转换 为 字符 串 ， 并 返回 结果 。 其 语法 格式 如 下 : 


arrayObject -toString() 


【 例 5.23】 (实例 文件 ，ch05\5.23.html) 将 数组 转换 成 字符 串 。 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 
Var arr = new Array(3) 


淳 淡 丁 泪 妆 一 一 安 漂 趾 斑 1duoSeAef 坤 9 沂 全 


arr[0] = "北京 " 
af = "将" 
arr[2] = "广州 " 
document .write (arr.tostring()) 
</script> 
</body> 
</html> NN 
上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-25 所 示 ， 可 以 看 出 数组 中 的 元 素 之 间 是 用 


逗号 分 隔 的 。 


北京 ,上 海 ,广州 


图 5-25 ”程序 运行 结果 
5.4.10 ”案例 一 一 将 数组 转换 成 本 地 字符 串 
使 用 toLocaleString() 方 法 可 以 把 数组 转换 为 本 地 的 字符 串 。 其 语法 格式 如 下 : 


arrayObject.toLocalestring() 


| 首先 调用 每 个 数组 元 素 的 toLocaleString() 方 法 ， 然 后 使 用 地 区 特定 的 分 隔 符 
SS 把 生成 的 字符 囊 连接 起 来 ， 形 成 一 个 字符 囊 。 


【 例 5.24】 (实例 文件 ，ch05\5.24.html) 将 数组 转换 成 本 地 的 字符 串 。 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 
var arr = new Array (3) 
arr[0] = "北京 " 


arr[lll 二 :上海 = 

arril2] 三 “广州 * 

document .write (arr.toLocalestring()) 
</script> 
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</body> 
</html> 


上 述 代码 在 更 
逗号 分 隔 的 。 


9.0 浏览 器 中 的 显示 效果 如 图 5-26 所 示 ， 可 以 看 出 数组 中 的 元 素 之 间 是 用 
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5-26 ”程序 运行 结果 


5.4.11 案例 一 一 在 数组 开头 插入 数据 


使 用 unshiftO 
格式 如 下 : 


方法 可 以 将 指定 的 元 素 插入 数组 开始 位 置 ， 并 将 值 返回 该 数组 。 其 语法 


arrayObject.unshift (newelementl,newelement2, ...,newelementN) 


其 中 ，arrayObj 是 必 选 项 ， 为 Array 的 对 象 ; newelementN 是 可 选项 ， 是 要 添加 到 该 数组 


对 象 的 新 元 素 。 


【 例 5.25】 (实例 文件 ，ch05\5.25.htmD) 在 数组 开头 插入 数据 。 代 码 如 下 : 


<html> 
<body> 


<script type="text/javascript"> 
Var arr = new Array() 


arr[0] = 
arr[1] = 
arr[2] = 
document. 
document . 
document . 
</script> 
</body> 
</html> 


上 述 代 码 在 正 


"北京 " 

"上 海 " 

"广州 " 

writel(arr + "<br />") 

write (arr.unshift ("天 津 ") + "<br />") 
write (arr) 


9.0 浏览 器 中 的 显示 效果 如 图 5-27 所 示 。 
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5.5 ”创建 和 使 用 自 定义 对 象 


目前 在 Javascript 中 ， 已 经 存在 一 些 标准 的 类 ， 例 如 Date、Array、RegExp、String、 
Math、Number 等 ， 这 为 编程 提供 了 许多 方便 。 但 对 于 复杂 的 客户 端 程序 而 言 ， 这 些 还 远 远 不 
够 。 在 JavaScript 脚本 语言 中 ， 还 有 浏览 器 对 象 、 用 户 自 定义 对 象 和 文本 对 象 等 对 象 ， 其 中 用 
户 自 定义 对 象 占据 举足轻重 的 地 位 。 

JavaScript 作为 基于 对 象 的 编程 语言 ， 其 对 象 实例 通过 构造 函数 来 创建 。 每 一 个 构造 函数 
包括 一 个 对 象 原型 ， 定 义 了 每 个 对 象 包含 的 属性 和 方法 。 在 JavaScript 脚本 中 创建 自 定义 对 象 
的 方法 主要 有 两 种 : 定义 对 象 的 构造 函数 和 直接 对 对 象 初始 化 。 


5.5.1 案例 一 一 定义 对 象 的 构造 函数 


在 实际 使 用 中 ， 可 首先 定义 对 象 的 构造 函数 ， 然 后 使 用 new 操作 符 来 生成 该 对 象 的 实 
例 ， 从 而 创建 自 定义 对 象 。 
【 例 5.26】 (实例 文件 : ch0S\5.26.htmD) 代 码 如 下 : 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 自 定义 对 象 </title> 
<script language="JavaScript" type="text/javascript"> 
<!-—- 
// 对 象 的 构造 函数 
function Student (iName,iAddress,iGrade,iSsScore) 
{ 
this.name=iName; 
this.address=iAddress; 
this.grade=iGrade; 
this.Score=iScore; 
this.information=showIinformation; 
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// 定 义 对 象 的 方法 

function showInformation() 

{ 
Var msg=""; 
msg=" 学 生 信息 : \n" 
msg+="\n 学 生 姓 名 : "+this.namet+" \n"; 
msg+=" 家 庭 地 址 : "+this.address +"\n"; 
msg+=" 班 级 : "+this.grade +" \n"; 
msg+=" 分 数 : "+this.Score 
window.alert (msg); 


. 
// 生 成 对 象 的 实例 
var ZJDX=new Student (" 刘 明 明 ", "新 疆 乌鲁木齐 100 号 ","401","99"); 


> 
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</script> 
</head> 
<body> 
<br> 
<center> 
<form> 
<input type="button"” value=" 查 看 " onclick="ZJDX.information()"> 

</form> 
</center> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 5-28 所 示 。 单 击 【 查 看 】 按 钮 ， 即 可 看 到 含 
有 学 生 信息 的 提示 框 如 图 5-29 所 示 。 


图 5-28 显示 结果 图 5-29 含有 学 生 信息 的 提示 框 


在 该 方法 中 ， 用 户 需要 先 定 义 一 个 对 象 的 构造 函数 ， 再 通过 new 关键 字 来 创建 该 对 象 的 
实例 。 定 义 对 象 的 构造 函数 如 下 : 
function Student (iName,iAddress,iGrade,iSscore) 
{ 
this.name=iName; 
this.address=iAddress; 
this.grade=iGrade; 
this.score=iScore; 
this.information=showInformation; 


} 


当 调 用 该 构造 函数 时 ， 浏 览 器 给 新 的 对 象 分 配 内 存 ， 并 将 该 对 象 传递 给 函数 。this 操作 符 
是 指向 新 对 象 引用 的 关键 词 ， 用 于 操作 这 个 新 对 象 。 语 句 this name=iName: 使 用 作为 函数 参数 
传递 过 来 的 iName 值 ， 在 构造 函数 中 给 该 对 象 的 name 属性 赋值 。 该 属性 属于 所 有 School 对 
象 ， 而 不 仅仅 属于 Student 对 象 的 某 个 实例 ， 例 如 上 面 的 ZJDX。 对 象 实例 的 name 属性 被 定 
义 和 赋 值 后 ， 可 以 通过 var st=ZJDX.name: 方 法 访问 该 实例 的 该 属性 。 

使 用 同样 的 方法 继续 添加 address、grade、score 等 其 他 属性 ， 但 information 不 是 对 象 的 
属性 ， 而 是 对 象 的 方法 : 


this.information=showInformation; 


信 i20 


方法 information 指向 的 外 部 函数 showInformation 的 结构 如 下 : 


function showInformation() 

| 
Var msg=""; 
msg=" 学 生 信息 : \n" 
msg+="\n 学 生 姓 名 : "+this.namet+" \n"; 
msg+=" 家 庭 地 址 : "+this.address +"\n"; 
msg+=" 班 级 : "+this.grade +" \n"; 
msg+=" 分 数 : "+this.Score 
window.alert (msg); 


} 

同样 ， 由 于 被 定义 为 对 象 的 方法 ， 在 外 部 函数 中 也 可 使 用 this 操作 符 指向 当前 的 对 象 ， 
并 通过 this.name 等 访问 它 的 某 个 属性 。 在 构建 对 象 的 某 个 方法 时 ， 如 果 代 码 比 较 简单 ， 也 可 
以 使 用 非 外 部 函数 的 做 法 ， 改 写 student 对 象 的 构造 函数 代码 如 下 : 


function Student (iName,iAddress,iGrade,iSscore) 
this.name=iName; 
this.address=iAddress; 
this.grade=iGrade; 
this.score=iScore; 
this.information=function() 
{ 
Var msg=" "; 
msg=" 学 生 信 息 \n" 
msg+="\n 学 生 姓 名 : "+this.name+" \n"; 
msg+=" 家 庭 地 址 : "+this.address +"\n"; 
msg+=" 班 级 : "+this.grade +" \n"; 
msg+=" 分 数 : "+this.Score 
window.alert (msg); 
}; 
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} 


5.5.2 ”案例 一 一 直接 对 对 象 初始 化 


与 定义 对 象 的 构造 函数 的 方法 不 同 的 是 ， 通 过 直接 对 对 象 初始 化 来 创建 自 定义 对 象 ， 无 
须 生成 此 对 象 的 实例 。 将 前 面 HTML 文件 中 的 JavaScript 脚本 部 分 修改 如 下 : 


<script language="JavaSscript" type="text/javascript"> 
3 
// 直 接 初始 化 对 象 
var ZJDX={name:" 刘 明明 "， 
address:" 新 疆 乌 鲁 木 齐 100 号 "， 
grade:" 401", 
BCexe ”9927 
information:showInformation 


$j 
// 定 义 对 象 的 方法 
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function showInformation() 
Var msg=""; 
msg=" 学 生 信 息 : \n" 
msg+="\n 学 生 姓 名 : "+this-name+" \n"; 
msg+=" 家 庭 地 址 : "+this.address +"\n"; 
msg+=" 班 级 : "+this.grade +" \n"; 
msg+=" 分 数 : "+this.Score 
window.alert (msg); 

于 

-> 

</script> 


在 下 9.0 浏览 器 中 显示 修改 后 的 HTML 文档 ， 可 以 看 出 与 前 面 的 结果 相同 。 该 方法 适合 
只 需 生 成 某 个 应 用 对 象 并 进行 相关 操作 的 情况 使 用 ， 代 码 紧 次， 编程 效率 高 。 但 若 要 生成 若 
干 个 对 象 的 实例 ， 就 必须 为 生成 的 每 个 实例 重复 相同 的 代码 结构 ， 最 终 只 是 参数 不 同 而 已 ， 
代码 的 重用 性 比较 差 ， 不 符合 面向 对 象 的 编程 思路 ， 所 以 应 尽量 避免 使 用 该 方法 创建 自 定义 
对 象 。 


5.5.3 ”案例 一 一 修改 和 删除 对 象 实例 的 属性 


JavaScript 脚本 可 动态 添加 对 象 实例 的 属性 ， 同 时 ， 也 可 动态 修改 、 删 除 某 个 对 象 实例 的 
属性 。 例 如 ， 修 改 HTML 文件 中 的 function showInformation0 部 分 ， 代 码 如 下 : 


function showInformation() 

{ 
var msg=""; 
msg=" 自 定义 对 象 实例 : \n\n" 
msg+=" 学 生 姓名 : "+this.namet" \n"; 
msg+=" 家 庭 地 址 : "+this.address +"\n"; 
msg+=" 班级 : "+this.grade +" \n"; 
msg+=" 分 数 : "+this.score+" \n\n"; 
// 修 改 对 象 实例 的 score 属性 
this.score=88; 
msg+=" 修 改 对 象 实例 的 属性 : \n\n" 
msg+=" 学 生 姓 名 : "+this.namet" \n"; 
msg+="” 所 在 地 址 : "+this.address +"\n"; 
msg+=" 班级 : "+this.grade +" \n"; 
msg+=" 分 数 : "+this.scoret" \n\n"; 
// 删 除 对 象 实例 的 score 属性 
delete this.score; 
msg+=" 删 除 对 象 实例 的 属性 : \n\n" 
msg+=" 学 生 姓 名 : "+this.name+" \n"; 
msg+="” 家 庭 地 址 : "+this.address +"\n"; 
msg+=" 班级 : "+this.grade +" \n"; 
msg+=" 分 数 : "+this.scoret+" \n\n"; 
window.alert (msg); 


@s 
第 中 
保存 更 改 ， 程 序 运 行 后 ， 在 原始 页 面 单 击 【 查 看 】 按 局 
钮 ， 弹 出 信息 框 如 图 5-30 所 示 。 Fe 
在 执行 this.score=88; 语 句 后 ， 对 象 实 例 的 score 属性 A Erasa 3 
值 更 改 为 88; 而 在 执行 delete this. score 语句 后 ， 对 象 实 Py 外 
例 的 score 属性 值 变 为 了 Undefined， 同 任何 不 存在 的 对 象 EE 司 
属性 一 样 为 未 定义 类 型 ， 但 并 不 能 删除 该 对 象 实例 本 身 ， i 总 
否则 将 返回 错误 。 0 础 
可 见 ，JavaScript 动态 添加 、 修 改 、 删 除 对 象 实例 的 Eg | 
属性 过 程 十 分 简单 。 之 所 以 称 之 为 对 象 实例 的 属性 而 不 是 和 对 人 安民 性 : 并 
对 象 的 属性 ， 是 因为 该 属性 只 在 对 象 的 特定 实例 中 才 存 se a 
在 ， 而 不 能 通过 某 种 方法 将 某 个 属性 赋予 特定 对 象 的 所 有 a bined 芝 
实例 。 NN 
Sn JavaScript 脚本 中 的 delete 运算 符 用 于 删 NN 
半 除 对 象 实例 的 属性 ， 而 在 C++ 中 delete 运算 0 NN 
符 不 能 删除 对 象 的 实例 。 图 5-30 ”修改 和 删除 对 象 实例 的 属性 


5.5.4 ”案例 一 一 通过 原型 为 对 象 添加 新 属性 和 新 方法 


在 JavaScript 中 ， 每 个 对 象 都 有 一 个 prototype( 原 型 ) 属 性 ， 通 过 该 属性 可 以 为 对 象 添加 新 
属性 和 新 方法 。 有 具体 的 语法 规则 如 下 : 


object .prototype.name=value 


下 面 通过 实例 来 讲解 prototype 属性 的 使 用 方法 。 
【 例 5.27】 (实例 文件 ，ch05\5.27.htmD 给 已 存在 的 对 象 添加 新 属性 和 新 方法 。 代 码 如 下 : 


<! DOCTYPE html> 
<html> 
<head> 
<title> 自 定义 对 象 </title> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
// 对 象 的 构造 函数 
function Student (iName,iAddress,iGrade,iscore) 
| 
this.name=iName; 
this.address=iAddress; 
this.grade=iGrade; 
this.score=iScore; 
this.information=showInformation; 


. 

// 定 义 对 象 的 方法 

function showInformation() 
f 


Var msg=""; 


msg=" 通 过 原型 给 对 象 添加 新 属性 和 新 方法 : \n\n" 
msg+=" 原 始 属性 : \n"; 
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msg+=" 学 生 姓名 : "+this.name+" \n"; 
msg+=" 家 庭 住 址 : "+this.address +"\n"; 
msg+=" 班 级 : "+this.grade +" \n"; 
msg+=" 分 数 : "+this.score+t" \n\n"; 
msg+=" 新 属性 : \n"; 
msg+=" 性 别 : "+this.addAttributeOfSex+" \n"; 
msg+=" 新 方法 : \n"; 
msg+=" 方 法 返回 : "+this.addMethod+"\n"; 
window.alert (msg); 

人 

function MYMethod () 
Var RddMsg="New Method Of Objectl!"7 
return AddMsg; 


// 生 成 对 象 的 实例 
var ZJDX=new Student (" 刘 明明 ", "新 疆 乌鲁木齐 100 号 ", "401", "88"); 
Student .prototype.addAttributeOfSex=" 男 "; 
Student .prototype.addMethod=MyMethod(); 
--> 
</script> 
</head> 
<body> 
<br> 
<center> 
<form> 
<input type="button" value=" 查 看 " onclick="ZJDX.information()"> 
</form> 
</center> 
</body> 
</html> 


将 上 述 的 代码 保存 为 HTML 文件 ， 再 在 正 9.0 浏览 器 中 打开 该 网 页 。 在 打开 的 网 页 中 单 
二 【查看 】 按 钮 ， 即 可 看 到 含有 新 添加 性 别 信息 的 提示 框 ， 如 图 5-31 所 示 。 


[= 


方法 返回 : New Method Of Objectl 


图 5-31 通过 原型 给 对 象 添加 新 属性 和 新 方法 
在 上 述 的 程序 中 ， 通 过 调用 对 象 的 prototype 属性 给 对 象 添加 新 属性 和 新 方法 的 是 以 下 代码 : 


Student .prototype -addRAttributeOfSex=" 男 "; 
Student .prototype .addMethod=MYMethod () 7 


原型 属性 为 对 象 的 所 有 实例 所 共享 ， 用 户 在 利用 原型 添加 对 象 的 新 属性 和 新 方法 后 ， 可 
通过 对 象 引用 的 方法 来 修改 。 


5.5.5 ”案例 一 一 自 定义 对 象 的 幅 套 


与 面向 对 象 编程 方法 相同 的 是 ，JavaScript 允许 对 象 的 嵌 套 使 用 ， 可 以 将 对 象 的 某 个 实例 
作为 另外 一 个 对 象 的 属性 来 看 待 。 
【 例 5.28】 (实例 文件 ，ch05\5.27.htmD 代 码 如 下 : 


<! DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 自 定义 对 象 联 套 </title> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
// 对 象 的 构造 函数 
// 构 造 嵌 套 的 对 象 
Var StudentData={ 
age:"26"， 
Tel:"1810000000", 
teacher:" 张 老师 " 


}; 

// 构 造 被 戏 入 的 对 象 

Var ZJDX={ 
name:" 刘 明明 "， 
address:" 新 疆 乌 鲁 木 齐 100 号 "， 
grade:"401", 
score:"86", 
// 嵌 套 对 象 studentData 
data:StudentDatay 
information:showInformation 


Da 

// 定 义 对 象 的 方法 

function showInformation() 

{ 
Var msg=""; 
msg=" 对 象 嵌 套 实 例 : \n\n"; 
msg+=" 被 嵌 套 对 象 直接 属性 值 : \n" 
msg+=" 学 生 姓 名 : "+this.namet+"\n"; 
msg+=" 家 庭 地 址 : "+this.address +"\n"; 
msg+=" 年 级 : "+this.grade +"\n"; 
msg+=" 分 数 : "+this.number +"\n\n"; 
msg+=" 访 问 嵌 套 对 象 直接 属性 值 : \n" 
msg+=" 年 龄 : "+this.data.age +"\n"; 
msg+=" 联 系 电话 : "+this.data.Tel +" \n"; 
msg+=" 班 主任 : "+this.data.teacher +" \n"; 
window.alert (msg) 7 

一 -> 

</script> 

</head> 
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<body> 

<br> 

<center> 

<form> 

<input type="button" value=" 查 看 " onclick="ZJDX.information()"> 

</form> 

</center> 

</body> 

</html> 


在 上 述 代码 中 ， 先 构造 了 对 象 StudentData 包含 学 生 的 相关 联系 信息 的 代码 如 下 : 


var StudentData={ 
age:"26", 
Tel:"1810000000", 
teacher:" 张 老师 " 
] 7 


然后 构建 ZJDX 对 象 ， 同 时 嵌入 StudentData 对 象 的 代码 如 下 : 


Var ZJDX={ 
name:" 刘 明明 "， 
we adqdress:" 新 疆 乌鲁木齐 100 号 "， 
NN grade:"401", 
\ score:"86", 
N // 媒 套 对 象 studentData 
N data:StudentData, 
information:showInformation 
3 


从 中 可 以 看 出 ， 在 构建 ZJDX 对 象 时 ，StudentData 对 象 被 作为 其 自身 属性 data 的 取 值 而 
引入 ， 并 可 通过 以 下 代码 对 其 进行 访问 : 


this.data.age 
this.data.Tel 
this.data.teacher 


程序 运行 后 。 在 打开 的 网 页 中 单 击 【 查 看 】 按 钮 ， 即 可 弹出 如 图 5-32 所 示 的 消息 对 话 框 。 


5-32” 自 定义 对 象 的 嵌 套 


全 1 


5.5.6 ”案例 一 一 内 存 的 分 配 和 释放 


JavaScript 是 基于 对 象 的 编程 语言 ， 而 不 是 面向 对 象 的 编程 语言 ， 因 此 缺少 指针 的 概念 。 
面向 对 象 的 编程 语言 在 动态 分 配 和 释放 内 存 方面 起 着 非常 重要 的 作用 ;而 在 JavaScript 中 在 创 
建 对 象 的 同时 ， 浏 览 器 会 自动 为 创建 的 对 象 分 配 内 存 空 间 。JavaScript 将 新 对 象 的 引用 传递 给 
调用 的 构造 函数 ， 而 在 清除 对 象 时 其 占据 的 内 存 将 被 自动 回收 ， 整 个 过 程 都 是 浏览 器 的 功 
劳 ，JavaScrip 只 是 创建 该 对 象 。 

浏览 器 中 的 这 种 内 存 管理 机 制 被 称 为 “内 存 回 收 ”。 它 动态 地 分 析 程 序 中 每 个 占据 内 存 
空间 的 数据 (变量 、 对 象 等 )。 如 果 该 数据 的 程序 标记 为 不 可 再 用 时 ， 浏 览 器 将 调用 内 部 函数 将 
其 占据 的 内 存 空间 释放 ， 实 现 内 存 的 动态 管理 。 在 定义 的 对 象 使 用 后 ， 如 果 该 对 象 不 再 使 
用 ， 则 给 其 赋 空 值 ， 这 样 该 对 象 占据 的 空间 将 被 释放 ; 如 果 该 对 象 还 会 被 使 用 ， 则 保留 该 对 
象 占据 的 空间 ， 直 至 该 对 象 不 再 被 使 用 为 止 。 


5.6 ”实战 演练 一 一 利用 二 维 数组 创建 动态 下 拉 菜 单 


许多 编程 语言 中 都 提供 定义 和 使 用 二 维 或 多 维 数组 的 功能 。JavaScript 通过 Array 对 象 创 
建 的 数组 都 是 一 维 的 ， 但 是 可 以 通过 在 数组 元 素 中 使 用 数组 来 实现 二 维 数组 。 

【 例 $.29】 (实例 文件 ，ch05\5.29.htmD) 使 用 一 个 二 维 数组 来 改变 下 拉 菜 单 中 的 内 容 。 代 
码 如 下 : 


<! DOCTYPE HTML> 

<HTML> 

<HEAD> 

<TITLE> 动 态 改变 下 拉 菜 单 内 容 </TITLE> 

</HEAD> 

<SCRIPT LANGUAGE=javascript> 
// 定 义 一 个 二 维 数组 acity, 用 于 存放 城市 名 称 。 
Var aCity=new Array(); 
aCity[0]=new Array(); 
aCity[1]=new Array(); 
aCity[2]=new Array(); 
aCity[3]=new Array(); 
// 赋 值 ， 每 个 省 份 的 城市 存放 于 数组 的 一 行 。 
acCity[0] [0]="-- 请 选择 -- 
acity[1] [0]=" -请 选择 -_"， 
acity[1] [1]=" 广 州 市 "; 
acity[1] [2]=" 深 圳 市 "; 
acCity[1] [3]=" 珠 海 市 "; 
acity[1] [4]=" 汕 头 市 "; 
acity[1] [5]=" 佛 山 市 "; 
aCity[2] [0]="-- 请 选择 --"; 
aCcity[2] [1]=" 长 沙市 "; 
acity[2] [2]=" 株 州 市 "; 
acity[2] [3]=" 湘 潭 市 "; 
acity[3] [0]="-- 请 选择 --"; 
acity[3] [1]=" 杭 州 市 "; 


溃 溢 贱 洱 妆 一 一 妾 淋 叫 斑 JduoSeAe? 翰 6 游 曾 六 


127@ 


JavaScript 动 态 网 站 开发 
案例 课 党 >… 


acity[3] [2]=" 宁 波 市 "; 
acity[3] [3]=" 温 州 市 "; 
function ChangeCity() 
有 
Var i,iProvinceIndex; 
iProvinceIndex=document .frm.optProvince.selectedIndex; 
ICityCount=07 
while (aCity[iProvinceIndex] [iCityCount] !=nul1) 
iCityCount++; 
// 计 算 选 定 省 份 的 城市 个 数 
document .frm.optCcity.length=iCityCount;// 改 变 下 拉 菜 单 的 选项 数 
for (i=0;i<=iCityCount-1;i++)// 改 变 下 拉 菜 单 的 内 容 
document .frm.optCity[i]=new Option(aCity[iProvinceIndex] [i]); 
document .frm.optCity.focus(); 
} 
</SCRIPT> 
<BODY ONfocus=ChangeCity()> 
<H3> 选 择 省 份 及 城市 </H3> 
<FORM NAME="frm"> 
<P> 省 份 : 
<SELECT NAME="optProvince" SIZE="]1" ONCHANGE=ChangeCity()> 
X <OPTION>-- 请 选择 --</OPTION> 
Xa <OPTION> 广 东 省 </OPTION> 
| <OPTION> 湖 南 省 </OPTION> 
<OPTION> 浙 江 省 </OPTION> 
N </SELECT> 
</P> 
<P> 城 市 : 
<SELECT NAME="optCity" SIZE="1"> 
<OPTION>-- 请 选择 --</OPTION> 
</ SELECT> 
</P> 
</FORM> 
</BODY> 
</HTML> 


在 下 浏览 器 中 打开 上 面 的 HTML 文档 ， 其 显示 结果 如 图 5-33 所 示 。 在 第 一 个 下 拉 列 表 
中 选择 某 个 省 份 ， 然 后 在 第 二 个 下 拉 列 表 即 可 看 到 相应 的 城市 ， 如 图 5-34 所 示 。 
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5-33 ”显示 结果 


5.7 ” 跟 我 练 练 手 


1. 练习 目标 

能 够 熟练 掌握 本 章 所 讲 内 容 。 

2. 上 机 练习 

练习 1: 对 象 访问 语句 的 使 用 方法 。 
练习 2: JavaScript 数组 的 使 用 方法 。 


练习 3: 常用 的 数组 对 象 的 使 用 方法 。 
练习 4: 创建 和 使 用 自 定义 对 象 的 使 用 方法 。 


5.8 高 手 甜 点 


甜点 1: JavaScript 支持 的 主要 对 象 有 哪些 ? 


JavaScript 支持 的 主要 对 象 如 下 。 

(1) JavaScript 核心 对 象 : 包括 同 基本 数据 类 型 相关 的 对 象 (例如 String、Boolean、 
Number)、 人 允许 创建 用 户 自 定义 和 组 合 类 型 的 对 象 ( 例 如 Object 、Aray) 和 其 他 能 简化 
JavaScript 操作 的 对 象 ( 例 如 Math、Date、RegExp、Function)。 

(2) 浏览 器 对 象 : 包括 不 属于 JavaScript 语言 本 身 但 被 绝 大 多 数 浏 览 器 所 支持 的 对 象 ， 例 
如 控制 浏览 器 窗口 和 用 户 交 互 界面 的 Window 对 象 、 提 供 客户 端 浏 览 器 配置 信息 的 Navigator 
对 象 。 

(3) 用 户 自 定义 对 象 ，Web 应 用 程序 开发 者 用 于 完成 特定 任务 而 创建 的 自 定义 对 象 ， 可 
自由 设计 对 象 的 属性 、 方 法 和 事件 处 理 程序 ， 编 程 灵 活性 较 大 。 

(4) 文本 对 象 : 由 文本 域 构成 的 对 象 ， 在 DOM 中 定义 ， 同 时 被 赋予 很 多 特定 的 处 理 方 
例如 insertData0、appendData0 等 。 


甜点 2: 如 何 获取 数组 的 长 度 ? 
获取 数组 长 度 的 代码 如 下 : 


Var arr=new Array(); 
Var len=arr.length; 


法 
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JavaScript 中 常用 的 内 置 对 象 有 多 种 ， 比 较 常 用 的 内 置 对 象 主要 有 日 期 和 字符 


串 等 。 日 期 对 象 主要 用 来 处 理 日 期 和 时 间 ; 字符 
详细 介绍 日 期 与 字符 串 的 使 用 方法 和 技巧 。 
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6.1 日 期 对 象 


在 JavaScript 中 ， 虽 然 没 有 日 期 类 型 的 数据 ， 但 是 在 开发 过 程 中 会 经 常 处 理 日 期 问题 。 对 
此 ，JavaScript 提供 了 日 期 (Date) 对 象 来 这 一 问题 。 


6.1.1 案例 一 一 创建 日 期 对 象 


在 JavaScript 中 ， 创 建 日 期 对 象 必须 使 用 new 语句 。 使 用 关键 字 new 新 建 日 期 对 象 的 方 
法 有 4 种 ， 各 方法 的 实现 代码 如 下 。 

方法 1: 日 期 对 象 =New Date () 

方法 2: 日 期 对 象 =New Date (日 期 字 串 ) 

方法 3: 日 期 对 象 =New Date (年 ,月 ,日 [时 ， 分 ， 秒 ，[ 毫 秒 ] ] ) 

方法 4: 日 期 对 象 =New Date (毫秒 ) 

上 述 4 种 创建 方法 ， 区 别 如 下 。 

(1) 方法 1 创建 了 一 个 包含 当前 系统 时 间 的 日 期 对 象 。 

(2) 方法 2 将 一 个 字符 串 转 换 成 日 期 对 象 。 该 字符 串 可 以 是 只 包含 日 期 的 字符 串 ， 也 可 
以 是 既 包 含 日 期 又 包含 时 间 的 字符 串 。JavaScript 对 日 期 格式 有 要 求 ， 通 常 使 用 的 格式 有 以 下 
两 种 。 

@ 日 期 字符 串 可 以 表示 为 : "月 日 ,年 小 时 :分 钟 : 秒 钟 "。 其 中 ， 月 份 必须 使 用 英文 单 

词 ， 而 其 他 部 分 需 使 用 数字 表示 ， 日 和 年 之 间 一 定 要 有 逗号 。 
@ 日 期 字符 串 可 以 表示 为 : "年 /月 /日 小 时 :分 钟 : 秒 钟 "。 其 中 ， 所 有 部 分 都 要 求 使 用 数 
字 ， 年 份 要 求 使 用 4 位， 月 份 用 0 至 11 的 整数 ， 代 表 1 月 至 12 月 。 

(3) 方法 3 通过 指定 年 月 日 时 分 秒 创 建 日 期 对 象 ， 时 分 秒 都 可 以 省 略 。 月 份 用 0 至 11 的 
整数 ， 代 表 1 月 至 12 月 。 

(4) 方法 4 使 用 毫秒 来 创建 日 期 对 象 。 例 如 ,把 1970 年 1 月 1 日 0 时 0 分 0 秒 0 毫秒 可 
看 成 一 个 基数 ， 而 给 定 的 参数 则 代表 距离 这 个 基数 的 毫秒 数 。 如 果 指 定 参 数 毫秒 为 3000， 则 
该 日 期 对 象 中 的 日 期 为 1970 年 1 月 1 日 0 时 0 分 0 秒 3 毫秒 。 

【 例 6.1】 (实例 文件 ，ch06\6.1.htmD) 使 用 4 种 方法 创建 日 期 对 象 。 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

<title> 创 建 日 期 对 象 </title> 

<script> 

// 以 当前 时 间 创建 一 个 日 期 对 象 


Var myDatel=new Date(); 

// 将 字符 串 转换 成 日 期 对 象 ， 该 对 象 代表 日 期 为 2010 年 5 月 10 日 

Var myDate2=new Date ("June 10,2010"); 

// 将 字符 串 转 换 成 日 期 对 象 ， 该 对 象 代表 日 期 为 2010 年 5 月 10 日 

var myDate3=new Date("2010/6/10"); 

// 创 建 一 个 日 期 对 象 ， 该 对 象 代表 日 期 和 时 间 为 2011 年 10 月 19 日 16 时 16 分 16 秒 
Var myDate4=new Date(2011,10,19,16,16,16); 


加 


/ /创建 一 个 日 期 对 象 ， 该 对 象 代表 距离 1970 年 1 月 1 日 0 分 0 秒 20000 毫秒 的 时 间 

Var myDate5=new Date(20000); 

// 分 别 输出 以 上 日 期 对 象 的 本 地 格式 

document .write ("myDate1l 所 代表 的 时 间 为 : "+myDatel .toLocalestring()+"<br>"); 
document .write ("myDate2 所 代表 的 时 间 为 : "+myDate2.toLocaleString()+"<br>"); 
document .write ("myDate3 所 代表 的 时 间 为 : "+myDate3.toLocaleString()+"<br>"); 
document .write ("myDate4 所 代表 的 时 间 为 : "+myDate4.toLocalestring()+"<br>"); 
document .write ("myDate5 所 代表 的 时 间 为 : "+myDate5.toLocaleString()+"<br>"); 
</script> 

</head> 

<body> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-1 所 示 。 
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图 6-1 创建 日 期 对 象 


Date 日 期 对 象 只 包含 两 个 属性 ， 分 别 是 constructor 和 prototype， 因 为 这 两 个 
Xs 属性 在 每 个 内 部 对 象 中 都 存在 ， 前 面 在 讲 数 组 对 象 时 已 经 讲 过 ， 这 里 不 再 殉 述 。 


6.1.2 ”案例 一 一 日 期 对 象 的 方法 


日 期 对 象 的 方法 主要 分 为 三 大 组 : setXxx、getXxx 和 toXxx。setXxx 组 的 方法 用 于 设置 
时 间 和 日 期 值 ，getXxx 组 的 方法 用 于 获取 时 间 和 日 期 值 ，toXxx 方法 主要 是 将 日 期 转换 成 指 


定格 式 。 日 期 对 象 的 方法 如 表 6-1 所 示 。 
表 6-1 日 期 对 象 的 方法 

方 法 描 述 
Date0 返回 当日 的 日 期 和 时 间 
getDate0 从 Date 对 象 返回 一 个 月 中 的 某 一 天 (1 一 3 
getDay 从 Date 对 象 返回 一 周 中 的 某 一 天 (0 一 6) 
getMonth() 从 Date 对 象 返回 月 份 (0 一 11) 
getFullYear0 从 Date 对 象 以 四 位 数字 返回 年 份 
getYear() 请 使 用 getFullYear0 方 法 代替 
getHours( 返回 Date 对 象 的 小 时 (0 一 23) 
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续 表 
方 法 描 述 

getMinutes| 返回 Date 对 象 的 分 钟 (0 一 59) 
getSeconds| 返回 Date 对 象 的 秒 数 (0 一 59) 

getMilliseconds() 返回 Date 对 象 的 毫秒 (0 一 999) 
getTime0 返回 1970 年 1 月 1 日 至 今 的 毫秒 数 
getTimezoneOffset0 返回 本 地 时 间 与 格林 威 治标 准时 间 (GMT) 的 分 钟 差 

etUTCDatelt 根据 世界 时 从 Date 对 象 返回 月 中 的 一 天 (1 一 31) 
getUTCDay() 根据 世界 时 从 Date 对 象 返回 周 中 的 一 天 (0 一 9) 
getUTCMonthO 根据 世界 时 从 Date 对 象 返 回 月 份 0 一 11) 

etUTCFullYear 根据 世界 时 从 Date 对 象 返回 四 位 数 的 年 份 
getUTCHoursO 根据 世界 时 返回 Date 对 象 的 小 时 (0 一 23) 
getUTCMinutes0 根据 世界 时 返回 Date 对 象 的 分 钟 (0 一 59) 
getUTCSeconds() 根据 世界 时 返回 Date 对 象 的 秒 钟 (0 一 59) 
getUTCMilliseconds() 根据 世界 时 返回 Date 对 象 的 毫秒 (0 一 999) 
parse() 返回 1970 年 1 月 1 日 午夜 到 指定 日 期 (字符 串 ) 的 毫秒 数 
setDate() 设置 Date 对 象 中 月 的 某 一 天 (1 一 3D 
setMonth() 设置 Date 对 象 中 月 份 (0 一 11) 

setFullYear() 设置 Date 对 象 中 的 年 份 (4 位 数字 ) 

setYear0) 请 使 用 setFullYear0 方 法 代替 

setHours() 设置 Date 对 象 中 的 小 时 (0 一 23) 

setMinutes() 设置 Date 对 象 中 的 分 钟 (0 一 59) 

setSeconds0) 设置 Date 对 象 中 的 秒 钟 (0 一 59) 
setMillisecondsO 设置 Date 对 象 中 的 毫秒 (0 一 999) 

setTime() 以 毫秒 设置 Date 对 象 

setUTCDate() 根据 世界 时 设置 Date 对 象 中 月 份 的 一 天 (1 一 31) 
setUTCMonth() 根据 世界 时 设置 Date 对 象 中 的 月 份 0 一 11) 
setUTCEullYear0 根据 世界 时 设置 Date 对 象 中 的 年 份 (4 位 数字 ) 
setUTCHours() 根据 世界 时 设置 Date 对 象 中 的 小 时 (0 一 23) 
setUTCMinutes| 根据 世界 时 设置 Date 对 象 中 的 分 钟 (0 一 59) 
setUTCSeconds() 根据 世界 时 设置 Date 对 象 中 的 秒 钟 (0 一 59) 
setUTCMilliseconds() 根据 世界 时 设置 Date 对 象 中 的 毫秒 (0 一 999) 
toSourceO 返回 该 对 象 的 源 代 码 
toStringO 把 Date 对 象 转换 为 字符 串 
toTimeString0 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toDateStringO 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
toGMTSting0 请 使 用 toUTCString0 方 法 代替 


全 


方 法 描 述 
toUTCSting0 根据 世界 时 ， 把 Date 对 象 转换 为 字符 串 


到 


续 表 


toLocaleStringO | 根据 本 地 时 间 格 式 ， 把 Date 对 象 转换 为 字符 串 
toL.ocaleTimeStrin 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 时 间 部 分 转换 为 字符 中 
toL.ocaleDateStringO 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 日 期 部 分 转换 为 字符 品 
UTCO | 根据 世界 时 返回 1997 年 1 月 1 日 到 指定 日 期 的 毫秒 数 
valueOf\ 返回 Date 对 象 的 原始 值 


在 表 6-1 中 ， 将 日 期 转换 成 字符 串 的 方法 ， 要 么 就 是 将 日 期 对 象 中 的 日 期 转换 成 字符 
串 ， 要 么 就 是 将 日 期 对 象 中 的 时 间 转 换 成 字符 串 ， 要 么 就 是 将 日 期 对 象 中 的 日 期 和 时 间 一 起 
转换 成 字符 串 。 并 且 ， 这 些 方法 转换 成 的 字符 串 格式 无 法 控制 ， 例 如 ， 将 日 期 转换 成 2010 年 
6 月 10 日 的 格式 ， 以 上 方法 就 无 法 做 到 。 

从 JavaScript1.6 开始 添加 了 一 个 toLocaleFormat( 方 法 ， 该 方法 可 以 有 选择 地 将 日 期 对 象 
中 的 某 个 或 某 些 部 分 转换 成 字符 串 ， 也 可 以 指定 转换 的 字符 串 格 式 。toLocaleFormat() 方 法 的 
语法 格式 如 下 : 


日 期 对 象 .toLocaleFormat (formatstring) 


参数 fom 


字符 格式 
%a 
%A 
%b 


%B 


小 妆 瑾 书 改 灯 汐 一 一 淹 妆 赐 习 号 lduoSeAeEF 才 9 小 是 


GG 


matString 是 要 转换 的 日 期 部 分 的 字符 ， 这 些 字符 及 含义 如 表 6-2 所 示 。 
表 6-2 日 期 的 部 分 字符 
说 明 
显示 日 期 的 缩写 ， 显 示 方 式 有 本 地 区 域 设置 
显示 星期 的 全 称 ， 显 示 方式 有 本 地 区 域 设置 
显示 月 份 的 缩写 ， 显 示 方 式 有 本 地 区 域 设置 
显示 月 份 的 全 程 ， 显 示 方 式 有 本 地 区 域 设置 


%c 


显示 日 期 和 时 间 ， 显 示 方式 有 本 地 区 域 设置 


%d 


以 2 位 数 的 形式 显示 月 份 中 的 某 一 日 ，01 一 31 


%H 


以 2 位 数 的 形式 显示 小 时 ，24 小 时 制 ，00 一 23 


%l 


以 2 位 数 的 形式 显示 小 时 ，12 小 时 制 ，01 一 12 


oi 


一 年 中 的 第 几 天 3 位 数 ，001 一 366 


%m 


%M 


2 位 数 月 份 ，01 一 12 
2 位 数 分 钟 ，00 一 59 


%p 


本 地 区 域 设 置 的 上 午 或 者 下 午 


%S, 
%U 


2 位 数秒 钟 00 一 59 
2 位 数 1 年 中 的 第 几 周 00 一 53( 星 期 天 为 一 周 的 第 一 天 ) 


WW 


一 周 中 的 第 几 天 0 一 6( 星 期 天 为 一 周 的 第 一 天 ，0 为 星期 天 ) 


%W 


2 位 数 一 年 中 的 第 几 周 00 一 53( 星 期 一 为 一 周 的 第 一 天 ， 一 年 中 的 第 一 个 星期 一 认为 是 第 0 周 ) 
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续 表 

字符 格式 说 明 
vx 显示 日 期 ， 显 示 方式 有 本 地 区 域 设置 
%x | 显示 时 间 ， 显 示 方式 有 本 地 区 域 设置 
% 2 位 年 份 
%Y, 4 位 年 份 
%Z | 如 果 失 去 信息 不 存在 ， 则 被 时 区 名 称 、 时 区 简称 或 者 被 无 字 节 苦 换 
9%0%6 显示 % 


【 例 6.2】 (实例 文件 ，ch06\6.2.html) 将 日 期 对 象 以 YYYY-MM-DD PMH: M: S 星期 
X 的 格式 显示 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 创 建 日 期 对 象 </title> 

<script> 

var now=new Date(); // 定 义 日 期 对 象 
// 输 出 自 定义 的 日 期 格式 

document .write ("今天 是 : "+now. toLocaleFormat ("%Y-%m-%d %p %H:%M:%S $%a") 7 
</script> 

</head> 

<body> 

</body> 

</html> 


由 于 toLocaleFormat() 方 法 是 JavaScript1.6 新 增加 的 功能 ， 正 、Opera 等 浏览 器 都 不 支 
持 ，Firefox 浏览 器 完全 支持 ， 网 页 预览 结果 如 图 6-2 所 示 。 
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6-2” 自 定义 格式 日 期 输出 效果 
6.2 详解 日 期 对 象 的 常用 方 ; 
下 面 详细 介绍 日 期 对 象 常用 方法 的 使 用 。 


6.2.1 案例 一 一 返回 当前 日 期 和 时 间 


由 于 Date 对 象 自动 使 用 当前 的 日 期 和 时 间作 为 其 初始 值 ， 所 以 使 用 Date0 方 法 可 返回 当 
天 的 日 期 和 时 间 。 其 语法 格式 如 下 : 
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Date () 

【 例 6.3】 (实例 文件 : ch06\6.3.htmD 返 回 当前 日 期 和 时 间 。 代 码 如 下 : 
<html> 

<body> 


<script type="text/javascript"> 
document .write (Date ()) 
</script> 

</body> 

</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 6-3 所 示 。 
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图 6-3 显示 效果 
6.2.2 ”案例 一 一 以 不 同 的 格式 显示 当前 日 期 
使 用 getDate() 方法 可 返回 月 份 的 某 一 天 。 其 语法 格式 如 下 : 


dateObject .getDate () 


其 中 ，dateObject 指 的 是 月 份 中 的 某 一 天 ， 且 使 用 的 是 本 地 时 间 。 返 回 值 是 1 一 31 之 间 的 
整数 。 
使 用 getMonth0 方 法 可 返回 表示 月 份 的 数字 。 其 语法 格式 如 下 : 


dateobject .getMonth () 


其 中 ，dateObject 的 月 份 字段 使 用 的 是 本 地 时 间 。 返 回 值 是 0( 一 月 ) 到 11( 十 二 月 ) 之 间 的 
整数 。 
使 用 getFullYear() 方法 可 返回 一 个 表示 年 份 的 4 位 数字 。 其 语法 格式 如 下 : 


dateobject .getEullYear () 


当 dateObject 用 本 地 时 间 表 示 时 ， 返 回 的 是 年 份 。 当 返回 的 值 是 一 个 4 位 数 时 ， 表 示 包 
括 世 纪 值 在 内 的 完整 年 份 ， 而 不 是 两 位 数 的 缩写 形式 。 
【 例 6.4】 (实例 文件 ，ch06\6.4.html) 以 不 同 的 格式 显示 当前 日 期 。 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 

Var d=new Date() 

Var day=d.getDate() 

var month=d.getMonth() + 1 

Var year=d.getFullYear() 

document .write(day + "." + month + "." + year) 
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document .write("<br /><br />") 

document .write(year + "/" + month + "/" + day) 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-4 所 示 。 
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6.2.3 ”案例 一 一 返回 日 期 所 对 应 的 周 次 
使 用 getDay0 方法 可 返回 表示 星期 的 数字 。 其 语法 格式 如 下 : 


SS dateObject .getDay() 


PS 其 中 ，dateObject 指 的 是 一 星期 中 的 某 一 天 ， 使 用 的 是 本 地 时 间 。 其 返回 值 是 0( 周 日 ) 到 
、、 a( 周 六 ) 之 间 的 整数 。 
【 例 65】 (实例 文件 ，choG\6 5 .htmD 返 回 日 期 所 对 应 的 周 次 。 代 码 如 下 


<html> 

<body> 

<script type="text/javascript"> 
Var d=new Date() 

Var weekday=new Array(7) 
weekday[0]=" 星 期 日 " 

weekday [1]=" 星 期 一 " 

weekday[2] =" 星 期 三 " 

weekday [3]=" 星 期 三 " 

weekday[4]=" 星 期 四 " 

weekday[5]=" 星 期 五 " 
weekday[6]=" 星 期 六 " 

document .write ("今天 是 " + weekday[d.getDay()]) 
</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-5 所 示 。 
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6.2.4 ”案例 一 一 显示 当前 时 间 
使 用 getHours0 方 法 可 返回 时 间 的 小 时 字段 。 其 语法 格式 如 下 : 


dateObject .getHours () 


其 中 ，dateObject 的 小 时 字段 ， 以 本 地 时 间 显 示 。 其 返回 值 是 0( 午 夜 ) 到 23( 晚 上 11 点 ) 之 
间 的 整数 。 
使 用 getMinutes0) 方法 可 返回 时 间 的 分 钟 字段 。 其 语法 格式 如 下 : 


dateobJject .getMinutes () 


dateObject 的 分 钟 字段 ， 以 本 地 时 间 显 示 。 其 返回 值 是 0 一 59 之 间 的 整数 。 
使 用 getSeconds() 方法 可 返回 时 间 的 秒 。 其 语法 格式 如 下 : 


dateObject .getSeconds () 
dateObject 的 分 钟 字段 ， 以 本 地 时 间 显 示 。 其 返回 值 是 0 一 59 之 间 的 整数 。 


@: 由 getHours()、getMinutes()、getSeconds0 〇 返回 的 值 是 一 个 两 位 的 数字 。 不 过 返 
正 。” 回 的 值 不 会 总 是 两 位 数 ， 如 果 该 值 小 于 10， 则 返回 的 值 是 个 一 位 数字 。 


【 例 6.6】 (实例 文件 ，ch06\6.6.htm) 显 示 当 前 时 间 。 代 码 如 下 : 


<html> 
<body> 
<script type="text/javascript"> 
function checkTime (i) 
,| 
1 (i<10) 
ti="0% 4 
return i 
. 
var d = new Date() 
document .write (checkTime (d.getHours ())) 
document .write("." 
document .write (checkTime (d.getMinutes ())) 
document .write(".") 
document .write (CheckTime (d.getSeconds ())) 
</script> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-6 所 示 。 
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6.2.5 “案例 一 返回 距 1970 年 1 月 1 日 午夜 的 时 差 
使 用 getTime() 方 法 可 返回 Date 对 象 距 1970 年 1 月 1 日 午夜 的 时 差 。 其 语法 格式 如 下 : 


dateObject .getTime () 


其 中 ，dateObject 表示 指定 的 日 期 和 时 间距 1970 年 1 月 1 日 午夜 (GMT 时 间 ) 之 间 的 毫 
秒 数 。 该 方法 总 是 结合 一 个 Date 对 象 来 使 用 。 
【 例 6.7】 (实例 文件 ，ch06\6.7.htmD) 返 回 时 差 。 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 
var minutes = 1000*60 

var hours = minutes*60 

Var days = hours*24 

Var years = days*365 

Var d = new Date() 

Var 七 = d.getTime() 

Var y = t/years 

document .write(" 从 1970 年 1 月 1 日 至 今 已 有 "+ y + "年 ") 
</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-7 所 示 。 
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6.2.6 ”案例 一 一 以 不 同 的 格式 显示 UTC 日 期 
使 用 getUTCDate() 方 法 可 根据 世界 时 返回 某 个 月 (UTC) 中 的 某 一 天 。 其 语法 格式 如 下 : 


dateobject .getUTCDate () 

其 中 ，dateObject 用 世界 时 表示 时 ， 返 回 该 月 中 的 某 一 天 (1 一 31 中 的 一 个 值 )。 不 过 ， 该 
方法 总 是 结合 一 个 Date 对 象 来 使 用 。 

使 用 getUTCMonth0 方 法 可 返回 一 个 表示 月 份 的 数字 (按照 世界 时 UTC)。 其 语法 格式 如 下 : 

dateObject .getUTCMonth () 

其 中 ，dateObject 是 用 世界 时 表示 的 月 份 ， 该 值 是 0( 一 月 ) 到 11( 十 二 月 ) 之 间 的 整数 。 需 
要 注意 的 是 ，Date 对 象 使 用 1 来 表示 月 的 第 一 天 ， 而 不 是 像 月 份 字段 那样 使 用 0 来 表示 一 年 


G1 


a 


的 第 一 个 月 。 
getUTCFullYear0 方 法 可 返回 根据 世界 时 (UTC) 表 示 的 年 份 (是 一 个 4 位 数 )。 其 语法 格式 
如 下 : 


dateObject .getUTCFullYear () 


其 中 ，dateObject 用 世界 时 表示 时 的 年 份 ， 该 值 是 一 个 4 位 的 整数 ， 而 不 是 两 位 数 的 
缩写 。 
【 例 6.8】 (实例 文件 ，ch06\6.8.html) 以 不 同 的 格式 显示 UTC 日 期 。 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 

Var d=new Date() 

Var day=d.getUTCDate () 

Var month=d.getUTCMonth() + 1 

Var Year=d.getUTCEullYear () 

document .write(dqay + "." + month + "." + year) 
document .write("<br /><br />") 

document .write(year + "/" + month + "/" + day) 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-8 所 示 。 
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图 6-8 程序 运行 结果 
6.2.7 ”案例 一 一 根据 世界 时 返回 日 期 对 应 的 周 次 
使 用 getUTCDay0) 方法 可 以 根据 世界 时 返回 表示 星期 的 一 个 数字 。 其 语法 格式 如 下 : 


dateobject .getUTCDay () 
【 例 6.9】 (实例 文件 ，ch06\6.9.htmD 根 据 世界 时 返回 日 期 对 应 的 周 次 。 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 
Var d=new Date() 

Var weekday=new Array(7) 
weekday[0]=" 星 期 日 " 

weekday[1]=" 星 期 一 " 

weekday[2]=" 星 期 二 " 

weekday[3]=" 星 期 三 " 
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weekday[4] =" 星 期 四 " 

weekday[5]=" 星 期 五 " 

weekday[6]=" 星 期 六 " 

document .write ("今天 是 " + weekday[d.getUTCDay ()]) 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-9 所 示 。 
ee Er Drox a | 


文件 (和 油 得 E)。 豆 看 Y)。 必 于 关内 工具 大幅 (H) 


今天 是 星期 二 


图 6-9 程序 运行 结果 
6.2.8 ”案例 一 一 以 不 同 的 格式 显示 UTC 时 间 
getUTCHours() 方法 可 根据 世界 时 (UTC) 返 回 时 间 的 小 时 。 其 语法 格式 如 下 : 


dateObject .getUTCHours () 


返回 的 dateObject 值 是 用 世界 时 表示 的 小 时 字段 。 该 值 是 一 个 0( 午 夜 ) 一 23( 晚 上 11 点 ) 之 
间 的 整数 。 
使 用 getUTCMinutes0 方 法 可 根据 世界 时 返回 时 间 的 分 钟 字段 。 其 语法 格式 如 下 : 


dateObject .getUTCMinutes () 


dateObject 的 分 钟 字段 ， 以 本 地 时 间 显 示 。 返 回 值 是 0 一 59 之 间 的 整数 。 
使 用 getUTCSeconds0 方 法 可 根据 世界 时 返回 时 间 的 秒 。 其 语法 格式 如 下 : 


dateobject .getUTCSeconds () 
dateObject 的 分 钟 字段 ， 以 本 地 时 间 显示 。 返 回 值 是 0 一 59 之 间 的 整数 。 


@; getUTCHours()、getUTCMinutes()、getUTCSeconds0 〇 返回 的 值 是 一 个 两 位 的 数 
省 小 。 字 。 不 过 返回 值 不 总 是 两 位 数 ， 如 果 该 值 小 于 10， 则 仅 返回 一 位 数字 


【 例 6.10】 (实例 文件 ，ch06\6.10.htmD) 以 不 同 的 格式 显示 UTC 时 间 。 代 码 如 下 : 


<html> 
<body> 
<script type="text/javascript"> 
function checkTime (i) 
|! 
有 在 LO 
0 
return i 


var d = new Date() 
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document .write (checkTime (d.getUTCHours () ) ) 
document .write(".") 

document .write (CheckTime (d.getUTCMinutes ())) 
document .write(".") 

document .write (CheckTime (d.getUTCSeconds () ) ) 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-10 所 示 。 
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图 6-10 程序 运行 结果 


6.2.9 ”案例 一 一 设置 日 期 对 象 中 的 年 份 、 月 份 与 日 期 值 
使 用 setFullYear() 方法 可 以 设置 日 期 对 象 中 的 年 份 。 其 语法 格式 如 下 : 


dateObject.setFullYear (year,month, day) 


其 中 ， 各 个 参数 的 含义 如 下 。 

eyear: 为 必 选 项 ， 是 表示 年 份 的 4 位 整数 ， 用 本 地 时 间 表 示 。 

e@ ”month: 可 选 ， 是 表示 月 份 的 数值 ， 介 于 0 一 11 之 间 ， 用 本 地 时 间 表 示 。 

e@ day: 可 选 ， 是 表示 月 中 某 一 天 的 数值 ， 介 于 1 一 31 之 间 ， 用 本 地 时 间 表 示 。 
使 用 setMonth0 方 法 可 以 设置 日 期 对 象 中 的 月 份 。 其 语法 格式 如 下 : 


dateObject .setMonth (month, day) 


其 中 ， 各 个 参数 的 含义 如 下 。 

e@ ”month: 必 选 ， 是 表示 月 份 的 数值 ， 该 值 介 于 0( 一 月 ) 一 11( 十 二 月 ) 之 间 。 

@ day: 可 选 ， 是 表示 月 的 某 一 天 的 数值 ， 该 值 介 于 1 一 31 之 间 ( 以 本 地 时 间 计 )。 
使 用 setDate() 方 法 可 以 设置 日 期 对 象 某 个 月 的 某 一 天 。 其 语法 格式 如 下 : 


dateobject .setDate (day) 


其 中 ，day 为 必 选 项 ， 是 表示 月 中 的 一 天 的 一 个 数值 1 一 31D)。 
【 例 6.11】 (实例 文件 ， ch06\6.11.htmD 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 

var dl = new Date() 

dl.setDate(15) 

document .write ("设置 Date 对 象 中 的 日 期 值 : "+a1) 
document .write("<br /><br />") 

var d2 = new Date() 
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d2.setMonth (0) 

document .write ("设置 Date 对 象 中 的 月 份 值 : "+d2) 
document .write ("<br /><br />") 

var d3 = new Date() 

d3.setFullYear (1992) 

document .write ("设置 Date 对 象 中 的 年 份 值 : "+d3) 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-11 所 示 。 
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图 6-11 程序 运行 结果 


6.2.10 ”案例 一 一 设置 小 时 、 分 钟 与 秒 钟 的 值 
使 用 setHours0 方法 可 以 设置 指定 时 间 的 小 时 字段 。 其 语法 格式 如 下 : 


dateObject.setHours (hour,min,sec,millisec) 


其 中 ， 各 个 参数 的 含义 如 下 。 


hour 必 选 ， 是 表示 小 时 的 数值 ， 介 于 0( 午 夜 ) 一 23( 晚 上 11 点 ) 之 间 ， 以 本 地 时 间 计 
(下 同 )。 

min 可 选 ， 是 表示 分 钟 的 数值 ， 介 于 0 一 5$9 之 间 。 在 EMCAScript 标准 化 之 前 ， 不 
支持 该 参数 。 

sec 可 选 ， 是 表示 秒 的 数值 ， 介 于 0 一 59 之 间 。 在 EMCAScript 标准 化 之 前 ， 不 支持 
该 参数 。 

millisec 可 选 ， 是 表示 毫秒 的 数值 ， 介 于 0 一 999 之 间 。 在 EMCAScript 标准 化 之 前 ， 
不 支持 该 参数 。 


使 用 setMinutes() 方 法 可 以 设置 指定 时 间 的 分 钟 字段 。 其 语法 格式 如 下 : 


dateobject .setMinutes (min,sec,millisec) 


其 中 ， 


各 个 参数 的 含义 如 下 。 

min 必 选 ， 是 表示 分 钟 的 数值 ， 介 于 0 一 59 之 间 ， 以 本 地 时 间 计 (下 同 )。 

sec 可 选 ， 是 表示 秒 的 数值 ， 介 于 0 一 59 之 间 。 在 EMCAScript 标准 化 之 前 ， 不 支 
millisec 可 选 ， 是 表示 毫秒 的 数值 ， 介 于 0 一 999 之 间 。 在 EMCAScript 标准 化 之 
前 ， 不 支持 该 参数 。 

使 用 setSeconds () 方 法 可 以 设置 指定 时 间 的 秒 钟 字段 。 其 语法 格式 如 下 : 
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dateObject.setSeconds (sec,millisec) 


其 中 ， 各 个 参数 的 含义 如 下 。 

@ sec 必 选 ， 是 表示 秒 的 数值 ， 该 值 是 介 于 0 一 59 之 间 的 整数 。 

@ ”millisec 可 选 ， 是 表示 毫秒 的 数值 ， 介 于 0 一 999 之 间 。 在 EMCAScript 标准 化 之 
前 ， 不 支持 该 参数 。 

【 例 6.12】 (实例 文件 ，ch06\6.12.htmD 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 

var dl = new Date() 

dl.setHours (15,35,1) 

document .write ("设置 Date 对 象 中 的 小 时 数 : sal 
document .write ("<br /><br />") 

Var d2 = new Date() 

d2.setMinutes (1) 

document .write ("设置 Date 对 象 中 的 分 钟 数 : "+d2) 
document .write ("<br /><br />") 

var d3 = new Date() 

d3.setSeconds (1) 

document .write ("设置 Date 对 象 中 的 秒 钟 数 : "+d3) 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-12 所 示 。 
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图 6-12 程序 运行 结果 
6.2.11 ”案例 一 一 设置 Date 对 象 的 UTC 日 期 
使 用 setUTCDate() 方 法 可 以 根据 世界 时 (UTC) 设 置 某 个 月 中 的 某 一 天 。 其 语法 格式 如 下 : 


dateobject .setUTCDate (day) 


其 中 ，day 为 必 选 项 ， 用 来 给 dateObject 设置 某 个 月 中 的 某 一 天 ， 用 世界 时 表示 。 该 参数 
是 1 一 31 之 间 的 整数 。 


5 Date 对 象 还 提供 了 一 系列 对 年 、 月 、 日 、 小 时 、 分 钟 、 秒 钟 进行 UTC 设置 
外 ”的 方法 ， 都 与 此 方法 的 使 用 方式 相同 ， 这 里 不 再 鞭 述 。 


【 例 6.13】 (实例 文件 :ch06\6.13 .htmD) 设 置 Date 对 象 的 UTC 日 期 。 代 码 如 下 : 


<html> 
<body> 
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<script type="text/javascript"> 
var d = new Date() 

d.setUTCDate (15) 

document .write(d) 

</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-13 所 示 。 
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.2.12 ”案例 一 一 返回 当地 时 间 与 UTC 时 间 的 差 值 


使 用 getTimezoneOffset0 方 法 可 返回 格林 威 治 时 间 和 本 地 时 间 之 间 的 时 差 ， 以 分 钟 为 单 
其 语法 格式 如 下 : 


dateObject .getTimezoneOffset () 


getTimezoneOffset0) 方 法 返回 的 是 本 地 时 间 与 GMT 时 间或 UTC 时 间 之 间 相 差 的 分 钟 
实际 上 ， 该 函数 反映 了 运行 JavaScript 代码 的 时 区 ， 以 及 指定 的 时 间 是 否 是 夏令 时 。 返 
| 之 所 以 以 分 钟 计 ， 而 不 是 以 小 时 计 ， 原 因 是 某 些 国家 所 占有 的 时 区 跨度 太 小 。 


和 由 于 使 用 夏令 时 的 惯例 ， 该 方法 的 返回 值 不 是 一 个 常量 。 
意 


【 例 6.14】 (实例 文件 ，ch06\6.14.htmD 返 回 当地 时 间 与 UTC 时 间 的 差 值 。 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 

var d = new Date() 

document .write ("现在 的 本 地 时 间 超 前 了 "+d.getTimezoneOoffset () /60+" 个 小 时 ") 
< serint> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-14 所 示 。 
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6.2.13 ”案例 一 一 将 Date 对 象 中 的 日 期 转化 为 字符 串 格式 
使 用 toString0 方 法 可 将 Date 对 象 转换 为 字符 串 ， 并 返回 结果 。 其 语法 格式 如 下 : 


dateObject.tostring() 


其 中 ， 该 函数 主要 作用 是 将 本 地 时 间 转 化 为 字符 串 格式 。 
【 例 6.15】 (实例 文件 ，ch06\6.15.html) 将 Date 对 象 中 的 日 期 转化 为 字符 串 格式 。 代 码 
如 下 : 


<html> 

<body> 

<script type="text/javascript"> 
var d = new Date() 

document .write (d.tostring()) 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-15 所 示 。 
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图 6-15 程序 运行 结果 
6.2.14 ”案例 一 一 返回 以 UTC 时 间 表 示 的 日 期 字符 串 


使 用 toUTCString0 方法 可 根据 世界 时 (UTC) 将 Date 对 象 转换 为 字符 串 ， 并 返回 结果 。 
其 语法 格式 如 下 : 


dateObject.toUTCString() 


其 中 ， 该 函数 的 主要 作用 是 将 世界 时 间 转 化 为 字符 串 格式 。 
【 例 6.16】 (实例 文件 : ch06\6.16.htmD 返 回 以 UTC 时 间 表 示 的 日 期 字符 串 。 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 
var d = new Date() 

document .write (d.toUTCString()) 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-16 所 示 。 
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6.2.15 ”案例 一 一 将 日 期 对 象 转化 为 本 地 日 期 


使 用 toLocaleString0 方 法 可 根据 本 地 时 间 将 Date 对 象 转换 为 字符 串 ， 并 返回 结果 。 其 语 
法 格式 如 下 : 


dateObject.toLocalestring() 


其 中 ， 该 函数 的 主要 作用 是 将 本 地 时 间 转 化 为 字符 串 格 式 ， 并 根据 本 地 规则 格式 化 。 
【 例 6.17】 (实例 文件 ，ch06\6.17.html) 将 日 期 对 象 转化 为 本 地 日 期 。 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 
var d = new Date() 

document .write (d.toLocalestring()) 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-17 所 示 。 
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图 6-17 程序 运行 结果 
6.2.16 ”案例 一 一 日 期 间 的 运算 


日 期 数据 之 间 的 运算 通常 包括 一 个 日 期 对 象 加 上 整数 的 年 、 月 、 日 和 两 个 日 期 对 象 相 减 
运算 。 
1. 日 期 对 象 与 整数 年 、 月 或 日 相 加 


日 期 对 象 与 整数 年 、 月 、 日 相 加 ， 需 要 将 它们 相 加 的 结果 通过 setXxx 函数 设置 成 新 的 日 
期 对 象 ， 才 能 实现 其 语法 格式 如 下 : 


date.setDate (date.getDate ()+value); // 增 加 日 
date.setMonth (date.getMonth () +value); // 增 加 月 
date.setFullYear (date.getFullYear ()+value); // 增 加 年 
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2. 日 期 相 减 


JavaScript 中 人 允许 两 个 日 期 对 象 相 减 ， 相 减 之 后 将 会 返回 这 两 个 日 期 之 间 的 毫秒 数 。 通 常 
会 将 毫秒 转换 成 秒 、 分 、 小 时 、 日 等 。 
【 例 6.18】 (实例 文件 : ch06\6.18.htmD) 日 期 间 的 运算 。 代 码 如 下 : 


< html> 

<head> 

<title> 创 建 日 期 对 象 </title> 

<script> 

Var now=new Date(); // 以 现在 时 间 定义 日 期 对 象 

var nationalDay=new Date(2015,10,1,0,0,0);  // 以 2015 年 国庆 节 定 义 日 期 对 象 
var msel=nationalDay-now // 相 差 毫秒 数 

// 输 出 相差 时 间 

document .write ("距离 2015 年 国庆 节 还 有 : "+msel+" 毫 秒 <br>"); 

document .write ("距离 2015 年 国庆 节 还 有 : "+parseInt (msel/1000) +" 秒 <br>"); 
document .write ("距离 2015 年 国庆 节 还 有 : "+parseInt (msel/ (60*1000) ) +" 分 钟 <br>") ; 
document .write ("距离 2015 年 国庆 节 还 有 : "+parseInt (msel/ (60*60*1000) )+" 小 时 
<pr> "ys 

document .write ("距离 2015 年 国庆 节 还 有 : "+parseInt (msel/ (24*60*60*1000))+" 天 
2 

</script> 

</head> 

<body> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-18 所 示 。 
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图 6-18 “日 期 对 象 相 减 运行 结果 
6.3 字符 串 对 象 


字符 串 类 型 是 JavaScript 中 的 基本 数据 类 型 之 一 。 在 JavaScript 中 ， 可 以 将 字符 串 直 接 看 
成 字符 串 对 象 ， 不 需要 任何 转换 。 


6.3.1 创建 字符 串 对 象 的 方法 
创建 字符 串 对 象 有 两 种 方法 ， 具 体 如 下 。 
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1. 直接 声明 字 串 变量 

通过 前 面 学 习 的 声明 字 串 变量 的 方法 ， 把 声明 的 变量 看 作 字 符 串 对 象 ， 语 法 格式 如 下 : 
[var] 字符 串 变量 = 字符 串 

说 明 : var 是 可 选项 。 例 如 ， 创 建 字 符 串 对 象 myString， 并 对 其 赋值 ， 代 码 如 下 : 

var myString="This is a sample"; 

2. 使 用 new 关键 字 来 创建 字符 囊 对 象 

使 用 new 关键 字 创建 字符 串 对 象 的 语法 格式 如 下 : 

[var] 字符 串 对 象 =new string (字符 串 ) 


说 明 : var 是 可 选项 ， 字 符 串 构造 函数 String0 的 第 一 个 字母 必须 大 写 。 
例如 ， 通 过 new 关键 字 创 建 字符 串 对 象 myString， 并 对 其 赋值 ， 代 码 如 下 : 


Var myString=new String("This is a sample") 7 
注意 : 上 述 两 种 语句 创建 字符 串 对 象 的 效果 是 一 样 的 ， 因 此 声明 字符 串 时 既 可 以 采用 
new 关键 字 ， 也 可 以 不 采用 new 关键 字 。 
6.3.2 字符 串 对 象 的 常用 属性 
字符 串 对 象 的 属性 比较 少 ， 常 用 的 属性 为 length。 字 符 串 对 象 的 属性 ， 如 表 6-3 所 示 。 
表 6-3 字符 串 对 象 的 属性 及 说 明 


Constructor 字 串 对 象 的 函数 模型 


添加 字 串 对 象 的 属性 


对 象 属性 的 使 用 格式 如 下 : 


对 象 名 .属性 名 ”// 获 取 对 象 属性 值 
对 象 名 .属性 名 = 值 ”// 为 属性 赋值 


例如 ， 声 字符 串 对 象 myArcticle， 然 后 输出 其 包含 的 字符 个 数 。 


var myArcticle=" 千里 始 足 下 ， 高 山 起 微 尘 ， 吾 道 亦 如 此 ， 行 之 贵 日 新 。 一 一 白居易 " 
document .write (myArcticle.length); ”// 输 出 字符 串 对 象 字符 的 个 数 


全 > 测试 字符 串 长 度 时 ， 空 格 也 占 一 个 字符 位 。 一 个 汉字 占 一 个 字符 位 ， 即 一 个 汉 
闪光 。 字 的 长 度 为 1 
【 例 6.19】 (实例 文件 ， ch06\6.19.htmD 计 算 字符 串 的 长 度 。 代 码 如 下 : 


<html> 
<body> 
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<script type="text/javascript"> 

Var txt="Hello World!™" 

document .write ("字符 串 “Hello World!” 的 长 度 为 : "+txt. length) 
</script> 

</body> 

</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 6-19 所 示 。 


字符 串 “Hello World!” 的 长 度 为 ，12 


图 6-19 “程序 运行 结果 
6.3.3 字符 串 对 象 的 常用 方法 


在 JavaScript 中 ， 经 常会 在 对 字符 串 对 象 中 查找 、 蔡 换 字 符 。 为 了 方便 操作 ，JavaScript 
中 内 置 了 大 量 的 方法 ， 用 户 只 需 直 接 使 用 这 些 方法 即 可 完成 相应 操作 。 字 符 串 对 象 的 常用 方 


法 如 表 6-4 所 示 。 
表 6-4 字符 串 对 象 的 常用 方法 


方 法 作 用 
anchor() 创建 HTML 锚 
big0 用 大 号 字体 显示 字符 串 
blink| 显示 闪 动 字符 串 
bold0 使 用 粗 体 显示 字符 串 
charAtO 返回 在 指定 位 置 的 字符 
charCodeAt() 返回 在 指定 的 位 置 的 字符 的 Unicode 编码 
concat() 连接 字符 串 
fixed0 以 打字 机 文本 显示 字符 串 
fontcolor( 使 用 指定 的 颜色 来 显示 字符 串 
fontsize0 使 用 指定 的 尺寸 来 显示 字符 串 
fromCharCode0 从 字符 编码 创建 一 个 字符 串 
indexOfO 检索 字符 串 
italicsO 使 用 斜体 显示 字符 串 
lastIndexOfO 从 后 向 前 搜索 字符 串 
linkO 将 字符 串 显示 为 链接 
localeCompare() 用 本 地 特定 的 顺序 来 比较 两 个 字符 串 
match() 找到 一 个 或 多 个 正则 表达 式 的 匹配 
Ieplacet 蔡 换 与 正则 表达 式 匹 配 的 子 串 


到 
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续 表 
方法 作 用 
search() 检索 与 正则 表达 式 相 匹配 的 值 
slice0) 提取 字符 串 的 片断 ， 并 在 新 的 字符 串 中 返回 被 提取 的 部 分 
small() 使 用 小 字号 来 显示 字符 串 
split0 把 字符 串 分 割 为 字符 串 数 组 
strike0 使 用 删除 线 来 显示 字符 串 
sub() 把 字符 串 显示 为 下 标 
substr0 从 起 始 索引 号 提取 字符 串 中 指定 数目 的 字符 
substringO 提取 字符 串 中 两 个 指定 的 索引 号 之 间 的 字符 
su 把 字符 串 显示 为 上 标 
toLocaleLowerCase() 把 字符 串 转换 为 小 写 
toLocaleUpperCase() 把 字符 串 转换 为 大 写 
toLowerCase() 把 字符 串 转换 为 小 写 
toUpperCase0O 把 字符 串 转换 为 大 写 
toSource0 代表 对 象 的 源 代码 
toStringO 返回 字符 串 
valueof0 返回 某 个 字符 串 对 象 的 原始 值 


6.4 详解 字符 串 对 象 的 常用 方法 
下 面 将 详细 讲解 字符 串 对 象 的 常用 方法 和 技巧 。 
6.4.1 案例 一 一 设置 字符 串 字体 属性 


使 用 字符 串 的 方法 可 以 设置 字符 串 字 体 的 相关 属性 ， 例 如 设置 字符 串 字 体 的 大 小 、 颜 色 
等 。 如 果 想 以 大 号 字体 显示 字符 串 ， 就 可 以 使 用 big0 方 法 ， 如 果 想 以 粗 体 方式 显示 字符 串 ， 
就 可 以 使 用 bold0 方 法 。 其 语法 格式 分 别 如 下 : 


stringObject .big() 
stringObject .bold() 


【 例 6.20】 (实例 文件 ，ch06\6.20.htmD) 设 置 字 符 串 的 字体 属性 。 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 

var txt=" 清 明 时 节 雨 纷纷 " 

document .write ("正常 显示 为 : " + txt + | 
document .write ("以 大 号 字体 显示 为 : " + tt big() 4 "</B>") 
document .write ("以 小 号 字体 显示 为 : ”+ txt.small() + "</p>") 
document .write ("以 粗 体 方式 显示 为 : " + txt.bold() + sx /p> 
document .write ("以 倾斜 方式 显示 为 : " + txt.italics() + "</p>") 
document .write ("以 打印 体 方式 显示 为 : " + txt.fixed() + "</p>") 


全 


document .write (" 添 加 删除 线 显示 为 : " + txt.strike() + "</p>") 

document .write ("以 指定 的 颜色 显示 为 : " + txt.fontcolor ("Red") + "</p>") 
document .write ("以 指定 字体 大 小 显示 为 : ”+ txt.fontsize(16) + "</p>") 
document .write ("以 上 标 方式 显示 为 : " + txt.sub() + "</p>") 
document .write ("以 下 标 方式 显示 为 : " + txt.sup() + "</p>") 

document .write ("为 字符 串 添加 超级 链接 : "+txt.link("http://www.baidu.com") + 
SP> 

</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-20 所 示 。 
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图 6-20 ”程序 运行 结果 
6.4.2 ”案例 一 一 以 闪烁 方式 显示 字符 串 
使 用 blink( 方 法 可 以 显示 闪 动 的 字符 串 。 其 语法 格式 如 下 ; 


stringobject.blink() J 
mi 
衣 和 该 方法 不 被 正 浏览 器 支持 。 

意 


【 例 6.21】 (实例 文件 ，ch06\6.21.html) 以 闪烁 方式 显示 字符 串 。 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 

var str=" 清 明 时 节 雨 纷纷 " 

document .write(str.blink()) 

</script> 

</body> 

</html> | 


上 述 代码 在 火狐 浏览 器 中 的 显示 效果 如 图 6-21 所 示 。 
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图 6-21 程序 运行 结果 
6.4.3 ”案例 一 一 转换 字符 串 的 大 小 写 


使 用 字符 串 对 象 中 的 toLocaleLowerCase()、toLocaleUpperCase() 、toLowerCase()、 
toUpperCase() 方 法 可 以 转换 字符 串 的 大 小 写 。 这 4 种 方法 的 语法 格式 如 下 : 

stringObject.toLocaleLowerCase () 

stringobject.toLowerCase () 


stringobject.toLocaleUppercase () 
stringObject. toUpperCase() 


mmm? 


与 toUpperCaseO(toLowerCase0) 不 同 的 是 ，toLocaleUpperCaseO(toLocaleLowerCase0) 
车 ”方法 按照 本 地 方式 把 字符 囊 转 换 为 大 写 (小 写 ) 时 ， 只 有 几 种 语言 (例如 土耳其 语 ) 具 
有 地 方 特有 的 大 小 写 映 射 ， 其 他 语言 使 用 该 方法 的 返回 值 通 常 与 toUpperCase() 


(toLowerCase()) 一 样 。 
【 例 6.22】 (实例 文件 ，ch06\6.22.html) 转 换 字符 串 的 大 小 写 。 代 码 如 下 : 
<html> 
<body> 


<script type="text/javascript"> 

Var txt="Hello World!™" 

document .write ("正常 显示 为 : " + txt + ns 
document .write ("以 小 写 方式 显示 为 : " + txt.toLowerCase () + pd 
document .write ("以 大 写 方式 显示 为 : " + txt.toUpperCase() + "</p>") 

document .write ("按照 本 地 方式 把 字符 串 转 化 为 小 写 : " + txt.toLocaleLowerCase() + 
VE 

document .write ("按照 本 地 方式 把 字符 串 转 化 为 大 写 : " + txt.toLocaleUpperCase () + 
XI 

</seriptS 

</body> 

</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 6-22 所 示 。 从 中 可 以 看 出 按照 本 地 方式 转换 
字符 串 的 大 小 写 与 不 按照 本 地 方式 转换 得 到 的 大 小 写 结果 是 一 样 的 。 
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正 沉 显示 为 ， 卫 11o Nozld! 

以 小 瑟 方 式 显示 为 : hello morldl 

以 大 写 方式 县 示 为 : 二 LD NORLD! 

按照 本 地 方式 把 字符 素 转化 为 小 号 ，bello wcrld! 
接 照 本 地 方式 把 字 征 中 转化 为 大 写 ，HFLLD WORLD! 


图 6-22 程序 运行 结果 
6.4.4 ”案例 一 一 连接 字符 串 
使 用 concat0 方 法 可 以 连接 两 个 或 多 个 字符 串 。 其 语法 格式 如 下 : 


stringObject.concat (StringXv stringX,...,stringx) 


其 中 ，stringX 为 必 选 项 ， 将 被 连接 为 一 个 字符 串 的 一 个 或 多 个 字符 串 对 象 。 
concat() 方 法 将 把 它 的 所 有 参数 转换 成 字符 串 ， 然 后 按 顺 序 连接 到 字符 串 stringObject 的 尾 
部 ， 并 返回 连接 后 的 字符 串 。 


3 stringObject 本 身 并 没有 被 更 改 。 另 外 ，stringObject.concat() 与 Array.concat() 
衣 眩 。 很 相似 。 不 过 ， 使 用 "+ "运算 符 来 进行 字符 囊 的 连接 运算 ， 通 常会 更 简便 一 些 ， 


【 例 6.23】 (实例 文件 ，ch06\6.23.html) 连 接 字 符 串 。 代 码 如 下 : 


<html> 

<body> 

<script type="text/javascript"> 
var strl=" 清 明 时 节 雨 纷纷 ，" 

var str2=" 路 上 行人 欲 断 魂 。" 
document .write (strl.concat (str2)) 
</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-23 所 示 。 
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图 6-23 程序 运行 结果 


6.4.5 “案例 一 一 比较 两 个 字符 串 的 大 小 


使 用 localeCompare() 方 法 可 以 用 本 地 特定 的 顺序 来 比较 两 个 字符 串 的 大 小 。 其 语法 格式 
如 下 ; 
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stringObject.localeCompare (target) 


规则 没有 区 别 ， 则 该 方法 返回 的 值 为 0。 
【 例 6.24】 (实例 文件 ，ch06\6.24.html) 比 较 两 个 字符 串 的 大 小 。 


<html> 

<body> 

<script type="text/javascript"> 
Var strl="Hello world" 

Var str2="hello World" 

Var str3= strl.localeCompare (str2) 
、 document .write ("比较 结果 为 : "+ str3) 
WY </script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-24 所 示 。 


其 中 ，target 参数 是 以 本 地 特定 的 顺序 与 stringObject 进行 比较 的 字符 串 。 
比较 完成 后 ， 如 果 stringObject 小 于 target， 则 localeCompare0O 返 回 小 于 0 的 数字 ; 如果 
stringObject 大 于 target， 则 该 方法 返回 大 于 0 的 数字 ;如果 两 个 字符 串 相 等 ， 或 根据 本 地 排序 
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图 6-24 “程序 运行 结果 
6.4.6 ”案例 一 一 分 割 字符 串 


使 用 split0 方 法 可 以 把 一 个 字符 串 分 割 成 字符 串 数组 。 其 语法 格式 如 下 : 


stringObject.split (separator, howmany) 


中 ， 各 参数 的 含义 如 下 。 


@ separator: 为 必 选 项 。 该 参数 可 以 是 字符 串 或 正则 表达 式 ， 从 该 参数 指定 的 地 方 分 割 


stringObject。 


® “howmany: 为 可 选项 。 该 参数 可 指定 返回 的 数组 的 最 大 长 度 。 如 果 设 置 了 该 参数 ， 
返回 的 子 串 不 会 多 于 这 个 参数 指定 的 数组 。 如 果 没 有 设置 该 参数 ， 那 么 整个 字符 串 


都 会 被 分 割 ， 不 考虑 它 的 长 度 。 
【 例 6.25】 (实例 文件 : ch06\6.25 .html) 分 割 字符 串 。 代 码 如 下 : 


<html> 
<body> 
<script type="text/javascript"> 
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var str=" 为 谁 辛苦 为 谁 忙 " 
document .write(str.split(™" ") + "<br />") 
document .write(str.split("") + "<br />") 


图 6-25 程序 运行 结果 


| 
document .write(str.split(" ",3)) 人 
</script> Cn 
</body> 中 
</html> 的 
上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 6-25 所 示 。 
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6.4.7 ”案例 一 一 从 字符 串 中 提取 字符 串 
substring0 方法 用 于 提取 字符 串 中 介 于 两 个 指定 下 标 之 间 的 字符 。 其 语法 格式 如 下 : 


stringObject.substring(start, stop) 


其 中 ， 各 参数 的 含义 如 下 。 

@ start: 为 必 选 项 ， 表 示 一 个 非 负 的 整数 ， 规 定 要 提取 的 子 串 的 第 一 个 字符 在 
stringObject 中 的 位 置 。 

@ stop: 为 可 选项 ， 表 示 一 个 非 负 的 整数 ， 比 要 提取 的 子 串 的 最 后 一 个 字符 在 
stringObject 中 的 位 置 多 1。 如 果 省 略 该 参数 ， 那 么 返回 的 子 串 会 一 直到 字符 串 的 
结尾 。 

【 例 6.26】 (实例 文件 : ch06\6.26.htmD 从 字符 串 中 提取 字符 串 。 代 码 如 下 : 

<html> 

<body> 

<script type="text/javascript"> 

var str="Hello world!™" 

document .write(str.substring (3,7)) 

</script> 


</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 6-26 所 示 。 


|) wsers sarin P ~ Ox | rusersadminet.. < 


Evo RE 


low 


6-26 ”程序 运行 结果 


‘51@ 


JavaScript 动 态 网 站 开发 
案例 课 膏 >… 


6.5 ”实战 演练 一 一 制作 网 页 随机 验证 码 


网 站 为 了 防止 用 户 利用 机 器 人 自动 注册 、 登 录 、 灌 水 ,采用 了 验证 码 技术 。 所 谓 验 证 
码 ， 就 是 系统 将 一 串 随 机 产生 的 数字 或 符号 ， 生 成 一 幅 图 片 ， 图 片 里 加 入 一 些 干扰 象 素 (防止 
OCR) 的 验证 信息 。 这 验证 码 信 息 由 用 户 肉眼 识别 后 ， 将 其 输入 到 表单 中 并 提交 网 站 验证 ， 只 
有 验证 成 功 后 用 户 才能 使 用 系统 提供 的 某 项 功能 。 

【 例 6.27】 随机 产生 一 个 由 n 位 数字 和 字母 组 成 的 验证 码 ， 如 图 6-27 所 示 。 单 击 【 刷 
新 】 按 钮 ， 重 新 产生 验证 码 ， 如 图 6-28 所 示 。 


my 
了 提示 使 用 数学 对 象 中 的 随机 数 方法 random 和 字符 串 的 取 字 符 方法 charAt， 可 以 
制作 网 页 随机 验证 码 。 
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图 6-27 随机 验证 码 图 6-28 刷新 验证 码 


具体 操作 步骤 如 下 。 
创建 HTML 文件 ， 并 输入 以 下 代码 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 
<title> 随 机 验证 码 </title> 
</head> 

<body> 

<span id="msg"></span> 
</body> 

</html> 


多 > span 标记 没有 什么 特殊 的 意义 ， 它 显示 的 是 某 行内 的 独特 样式 ， 在 这 里 主要 
闪光 是 用 于 显示 产生 的 验证 码 。 为 了 保证 后 面 的 程序 能 正常 运行 ， 一 定 不 要 省 咯 id 必 
性 及 修改 取 值 。 
EDDD) 新 建 JavaScript 文件 ， 保 存 文件 名 为 getCodejs， 保 存在 与 HTML 文件 相同 的 位 
置 。 在 getCodejjs 文件 中 键入 以 下 代码 : 
/* 产 生 随 机 数 函 数 */ 
function validateCode(n){ 


/* 验 证 码 中 可 能 包含 的 字符 */ 
Var s="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"™; 
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var ret=""; // 保 存 生成 的 验证 码 
/* 利 用 循环 ， 随 机 产生 生 验 证 码 中 的 每 个 字符 */ 
Eor (Var i=0;i<n;i++) 
{ 
var index=Math.floor (Math.random()*62); // 随 机 产生 一 个 0-62 之 间 的 数字 
ret+=s .charAt (index);  ”// 将 随机 产生 的 数字 当 作 字 符 串 的 位 置 下 标 ， 在 字符 串 s 中 
取出 该 字符 ， 并 入 ret 中 
} 
return ret;  // 返 回 产生 的 验证 码 
了 


/* 显 示 随 机 数 函 数 */ 
function show(){ 
document .getElementById("msg") .innerHTML=validateCode (4) 7 // 在 id 为 msg 


的 对 象 中 显示 验证 码 


岗 关 出 专 计 册 T 基 臣 一 一 台 尖 大 了 导 下 1]duoSeAer_ 才 9 由 


window.onload=show; ”// 页 面 加 载 时 执行 函数 show 
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四， 在 getCodejs 文件 中 ，validateCode 函数 主要 用 于 产生 指定 位 数 的 随机 数 ， 并 NN 
此 返回 该 随机 数 。 函 数 show 主要 用 于 调用 validateCode 函数 ， 并 在 id 为 msg 的 对 象 
中 显示 随机 数 。 


在 show 函数 中 ，document 的 getElementById("msg") 函 数 通过 DOM 模型 获得 
对 象 ，innerHTML 属性 是 修改 对 象 的 内 容 。 后 面 会 详细 讲述 。 


GET》 在 HTML 文件 的 head 部 分 ， 键 入 以 下 代码 : 


<script src="getCode.js" type="text/javascript"></script> 


GETZY 在 HTML 文件 中 ， 修 改 “ 刷 新 ”按钮 代码 ， 修 改 结果 如 下 : 


<input type="button"” value=" 刷 新 ” onclick="show()" /> 


保存 网 页 ， 运 行程 序 即 可 查看 最 终 效果 。 


FE 在 本 例 中 ， 使 用 了 两 种 方法 为 对 象 增加 事件 : @ 在 HTML 代码 中 增加 事件 ， 
内 。 即 给 刷新 按钮 增加 的 onclick 事件 ; @ 在 JS 代码 中 增加 事件 ， 即 在 JS 代码 中 为 窗 
口 增加 onload 事件 。 


6.6 ” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: 日 期 对 象 的 创建 方法 。 
练习 2: 日 期 对 象 的 常用 方法 。 
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练习 3: 字符 串 对 象 的 创建 方法 。 
练习 4: 字符 串 对 象 的 使 用 方法 。 


6.7 高 手 甜 点 


甜点 1: 如 何 产生 指定 范围 内 的 随机 整数 ? 

在 实际 开发 中 ， 经 常会 使 用 到 指定 范围 内 的 随机 整数 。 借 助 数学 方法 ， 指 定 范围 内 的 随 
机 整数 的 产生 方法 如 下 。 

(1) 产生 0 至 n 之 间 的 随机 整数 : Math.floor(Math.random()*(n+1))。 

(2) 产生 nl 至 n2 之 间 的 随机 整数 : Math.floor(Math.randomO*(n2-n1))+nl1。 

甜点 2: 如 何 转换 时 间 单位 ? 

时 间 单 位 主要 包括 毫秒 、 秒 、 分 钟 、 小 时 。 时 间 单 位 的 转换 如 下 。 

1000 毫秒 =1 秒 ，60 秒 =1 分 钟 ，60 分 钟 =1 小 时 。 
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是 数学 函数 。Math 对 象 提供 了 许多 数学 相关 
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， 而 min value 表示 最 ， 


的 功能 ， 例 如 ， 获 得 一 个 数字 自 
与 数学 对 象 的 使 用 方法 和 技巧 。 
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7.1 ”Number 对 象 


Number 对 象 是 原始 数值 的 包装 对 象 ， 其 代表 的 是 数值 数据 类 型 和 提供 数值 的 对 象 。 下 面 
就 来 介绍 Number 对 象 的 一 些 常用 属性 和 方法 。 


7.1.1 案例 一 一 创建 Number 对 象 


在 创建 Number 对 象 时 ， 它 可 以 不 与 运算 符 new 一 起 使 用 ， 而 直接 作为 转换 函数 来 使 
用 。 以 这 种 方式 调用 Number 对 象 时 ， 它 会 把 自己 的 参数 转化 成 一 个 数字 ， 然 后 返回 转换 后 
的 原始 数值 。 

创建 Number 对 象 的 语法 结构 如 下 : 


numObj=new Number (value) 


其 中 ， 各 参数 的 含义 如 下 。 

e ”numObj: 表示 要 赋值 为 Number 对 象 的 变量 名 。 

@ value: 为 可 选项 ， 是 新 对 象 的 数字 值 。 如 果 忽 略 Boolvalue， 则 返回 值 为 0。 
【 例 7.1】 (实例 文件 ，ch07\7.1.htmD) 创 建 一 个 Number 对 象 。 


<html> 

<body> 

<script type="text/javascript"> 
Var numObjl=new Number () 

Var numObj2=new Number (0) 

Var numobj3=new Number (-1) 
document .write (numObjl1+"<br>"); 
document .write (numObj2+"<br>"); 
document .write (numObj3+"<br>"); 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-1 所 示 。 
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7-1 程序 运行 结果 
7.1.2 ”案例 一 一 Number 对 象 的 属性 
Number 对 象 包括 7 个 属性 ， 如 表 7-1 所 示 。 其 中 ，constructor 和 prototype 两 个 属性 在 每 


全 i 


到 


个 内 部 对 象 中 都 有 ， 前 面 已 经 介绍 过 ， 这 里 不 再 袭 述 。 
表 7-1 Number 对 象 的 属性 


属 性 作 用 
constructor 返回 对 创建 此 对 象 的 Number 函数 的 引用 
MAX VALUE 可 表示 的 最 大 的 数 
MIN VALUE 可 表示 的 最 小 的 数 
NaN 非 数 字 值 


NEGATIVE INFINITY 
POSITIVE_ INEFINITY 


负 无 穷 大 ， 滋 出 时 返回 该 值 
正 无 穷 大 ， 洪 出 时 返回 该 值 
使 您 有 能 力 向 对 象 添 加 属性 和 方法 


rototype 
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1. MAX VALUE 

MAX VALUE 属性 是 JavaScript 中 可 表示 的 最 大 的 数 。 其 近似 值 为 
1.7976931348623157x10308。 

其 语法 格式 如 下 : 

Number .MAX_ VALUE 

【 例 7.2】 (实例 文件 ，ch07\7.2.html) 返 回 JavaScript 中 最 大 的 数值 。 


<html> 

<body> 

<script type="text/javascript"> 
document .write (Number .MAX VALUE); 
</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-2 所 示 。 
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图 7-2 程序 运行 结果 
2.MIN VALUE 属性 
MIN_ VALUE 属性 是 JavaScript 中 可 表示 的 最 小 的 数 (接近 0， 但 不 是 负数 )。 它 的 近似 值 
为 S10 
其 语法 格式 如 下 : 


Number .MIN VALUE 


【 例 7.3】 (实例 文件 : ch07\7.3.htmD) 返 回 JavaScript 中 最 小 的 数值 。 
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<html> 

<body> 

<script type="text/javascript"> 
document .write (Number .MIN VALUE); 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-3 所 示 。 


7-3 ”程序 运行 结果 


3. NaN 属性 


NaN 属性 是 代表 非 数 字 值 的 特殊 值 。 该 属性 用 于 指示 某 个 值 不 是 数字 。 可 以 把 Number 
| 对 象 设置 为 该 值 ， 来 指示 其 不 是 数字 值 。 
N 其 语法 格式 如 下 : 


、\ Number .NaN 


mm 
广 需要 使 用 isNaN(O 全 局 函数 来 判断 一 个 值 是 否 是 NaN 值 。 
意 


【 例 7.4】 (实例 文件 ， ch07\7.4.htmD 用 NaN 指示 某 个 值 是 否 是 数字 。 


<html> 

<body> 

<script type="text/javascript"> 
var Month=30; 

i£f (Month < 工作 Month > 12) 


{ 

Month = Number.NaN; 

} 

document .write (Month); 
</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-4 所 示 。 


Wserporinin D ~ 巴 X| 本 huoweadnaser- > 
RN RM EBV Sx TAN BR 


oy 


7-4 ”程序 运行 结果 
4. NEGATIVE INFINITY 属性 


NEGATIVE INFINITY 属性 表示 小 于 Number.MIN_VALUE 的 值 。 该 值 代 表 负 无 穷 大 。 


其 语法 格式 如 下 : 


Number .NEGATIVE INFINITY 


【 例 7.5】 (实例 文件 ，ch07\7.5.htmD) 返 回 负 无 穷 大 数值 。 


<html> 

<body> 

<script type="text/javascript"> 

Var x=(-Number.MAX VALUE)*2 

if (x==Number .NEGATIVE INFINITY) 
document .write(" 负 无 穷 大 数值 为 : 网 全 才 
} 

</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-5 所 示 。 
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图 7-5 程序 运行 结果 
5. POSITIVE INFINITY 属性 


POSITIVE _INFINITY 属性 表示 大 于 NumberMAX VALUE 的 值 。 该 值 代表 正 无 穷 大 。 
其 语法 格式 如 下 : 


Number .POSITIVE INFINITY 


【 例 7.6】 (实例 文件 : ch07\7.6.htmD 返 回 正 无 穷 大 数值 。 


<html> 

<body> 

<script type="text/javascript"> 

Var x=(Number .MAX VALUE)*2 

if (x==Number.POSITIVE INFINITY) 

{ 

document .write(" 正 无 穷 大 数值 为 : " + x); 
} 


</script> 


</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-6 所 示 。 


7-6 程序 运行 结果 
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7.1.3 Number 对 象 的 方法 


Number 对 象 包含 的 方法 并 不 多 ， 这 些 方法 主要 用 于 数据 类 型 的 转换 ， 如 表 7-2 所 示 。 
表 7-2 Number 对象 的 方法 


疮 法 作 用 
toString 把 数字 转换 为 字符 串 ， 使 用 指定 的 基数 
人 把 数字 转换 为 字符 串 ， 使 用 本 地 数字 格式 顺序 
toFixed | 把 数字 转换 为 字符 串 ， 结 果 的 小 数 点 后 有 指定 位 数 的 数字 
toExponential | 把 对 象 的 值 转换 为 指数 计数 法 
| 把 数字 格式 化 为 指定 的 长 度 
valueOf 返回 一 个 Number 对 象 的 基本 数字 值 


7.2 详解 Number 对象 常用 的 方法 
下 面 详细 讲述 Number 对 象 常用 的 方法 和 技巧 。 


7.2.1 案例 一 一 把 Number 对 象 转换 为 字符 串 


使 用 toString() 方 法 可 以 把 Number 对 象 转换 成 一 个 字符 串 ， 并 返回 结果 。 
语法 格式 如 下 : 
NumberObject.tostring (radix) 


其 中 参数 radix 为 可 选项 ， 表 示 数 字 的 基数 ， 是 2 一 36 之 间 的 整数 。 若 省 略 该 参数 ， 则 使 
用 基数 10。 但 是 要 注意 ， 如 果 该 参数 是 10 以 外 的 其 他 值 ， 则 ECMAScript 标准 允许 实现 返回 
任意 值 。 

【 例 7.7】 (实例 文件 :ch07\7.7.htmD 把 数值 对 象 转换 为 字符 串 。 


<html> 

<body> 

<script type="text/javascript"> 

Var number = new Number (10); 

document .write ("将 数字 以 十 进 制 形式 转换 成 字符 串 : ") ; 
document .write (number .toString()) 
document .wFite ("<br>") 7 

document .write (" 将 数字 以 十 进 制 形式 转换 成 字符 串 : ") ; 
document .write (number -toString(10) ) 
document .write ("<br>") 7 

document .write (" 将 数字 以 二 进 制 形式 转换 成 字符 串 : ") ; 
document .write (number .toString(2) ) 

document -write("<bIr>") 7 

document .write (" 将 数字 以 八进制 形式 转换 成 字符 串 : ") ; 
document .write (number -toString(8) ) 

document -write ("<bIr>") 7 


Gi 


document .write ("将 数字 以 十 六 进 制 形式 转换 成 字符 串 : ") ; 
document .write (number-toString(16) ) 

</acripDt> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-7 所 示 。 
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7-7 程序 运行 结果 
7.2.2 ”案例 一 一 把 Number 对 象 转换 为 本 地 格式 字符 串 
使 用 toLocaleString() 方 法 可 将 Number 对 象 转换 为 本 地 格式 的 字符 串 。 其 语法 格式 如 下 : 


NumberObject.toLocaleString() 


本 其 返回 的 数字 以 字符 串 表 示 。 不 过 ， 根 据 本 地 规范 进行 格式 化 ， 可 能 会 影响 到 
中 。 小 数 点 或 千 分 位 分 隔 符 采 用 的 标点 符号 。 


【 例 7.8】 (实例 文件 ，ch07\7.8.html) 把 数值 对 象 转换 为 本 地 字符 串 。 


<html> 

<body> 

<script type="text/javascript"> 

Var number = new Number (12.3848); 

document .write ("转换 前 的 值 为 : "+ number); 

document .write("<br>"); 

document .write ("转换 后 的 值 为 : "+number.toLocalestring()) 
</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-8 所 示 。 
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图 7-8 程序 运行 结果 
7.2.3 ”案例 一 一 四 含 五 入 时 指定 小 数位 数 
使 用 toFixed0 方 法 可 把 Number 四 舍 五 入 为 指定 小 数位 数 的 数字 。 其 语法 格式 如 下 : 


NumberObject .toFixed (num) 
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其 中 参数 num 为 必 选 项 ， 用 于 规定 小 数 的 位 数 ， 是 0 一 20 之 间 的 值 ， 包 括 0 和 20， 有 的 
实现 可 以 支持 更 大 的 数值 范围 。 如 果 省 略 了 该 参数 ， 将 用 0 代 蔡 。 
【 例 7.9】 (实例 文件 ，ch07\7.9.htmD 四 舍 五 入 时 指定 小 数位 数 。 


<html> 

<body> 

<script type="text/javascript"> 

var number = new Number(12.3848); 

document .write (" 原 数值 为 : "+ number); 

document .write ("<br>") 

document .write ("保留 两 位 小 数 的 数值 为 : "+number. toFixed(2)) 
</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-9 所 示 。 
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图 7-9 程序 运行 结果 


7.2.4 ”案例 一 一 返回 以 指数 记 数 法 表示 的 数字 
使 用 toExponential0 方 法 可 把 对 象 的 值 转换 成 指数 记 数 法 。 其 语法 格式 如 下 : 


NumberObject .toExponential (num) 
其 中 参数 num 为 必 选 项 ， 用 于 规定 指数 记 数 法 中 的 小 数位 数 ， 是 0 一 20 之 间 的 值 。 
【 例 7.10】 (实例 文件 : ch07\7.10.htmD 以 指数 记 数 法 表示 数值 。 


<html> 

<body> 

<script type="text/javascript"> 

Var number = new Number (10000); 

document .write (" 原 数值 为 : "+ number); 

document .write ("<br>") 

document .write (" 以 指数 记 数 法 表示 为 ， "+number. toExponential (2) ) 
<YSCEHRE 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-10 所 示 。 
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7.2.5 “案例 一 一 以 指数 记 数 法 指定 小 数位 


使 用 toPrecision0 方 法 可 在 对 象 的 值 超 出 指定 位 数 时 将 其 转换 为 指数 记 数 法 。 其 语法 格式 
如 下 : 


NumberObject .toPrecision (num) 


其 中 参数 num 为 必 选 项 。 规 定 必须 被 转换 为 指数 记 数 法 的 最 小 位 数 。 该 参数 是 1 一 21 之 
间 ( 且 包括 1 和 21) 的 值 。 有 效 实现 允许 有 选择 地 支持 更 大 或 更 小 的 num。 如 果 省 略 了 该 参 
数 ， 则 需 调用 方法 toString0， 而 不 是 把 数字 转换 成 十 进 制 的 值 。 

【 例 7.11】 (实例 文件 : ch07\7.11.html) 以 指数 记 数 法 指定 小 数位 。 


<html> 
<body> 
<script type="text/javascript"> 
Var number = new Number (10000); 
document .write (" 原 数值 为 : "+ number); 
document .write("<br>"); 
document .write ("转换 后 的 结果 为 : "+number. toPrecision (2)) 
</script> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-11 所 示 。 
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图 7-11 程序 运行 结果 
7.3 ”Math 对 象 


Math 对 象 提供 了 大 量 的 数学 常量 和 数学 函数 。 在 使 用 Math 对 象 时 ， 不 能 使 用 关键 字 
new 来 创建 对 象 实例 ， 而 应 直接 使 用 “对 象 名 .成 员 ” 的 格式 来 访问 其 属性 和 方法 。 


7.3.1 案例 一 一 创建 Math 对 象 
创建 Math 对 象 的 语法 结构 如 下 : 


Math. [{property|lmethod}] 


其 中 ， 各 个 参数 的 含义 如 下 。 
@ property: 必 选 项 ， 为 Math 对 象 的 一 个 属性 名 。 
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@ method: 必 选 项 ， 为 Math 对 象 的 一 个 方法 名 。 

Math 对 象 并 不 像 Date 和 String 那样 是 对 象 的 类 ， 因 此 它 没有 构造 函数 MathO 。 像 
Math.sin0 这 样 的 函数 只 是 函数 ， 不 是 某 个 对 象 的 方法 。 因 此 用 户 无 须 创 建 ， 通 过 把 Math 作 
为 对 象 使 用 就 可 以 调用 其 所 有 的 属性 和 方法 。 

【 例 7.12】 (实例 文件 ，ch07\7.12.htmD) 在 字符 串 中 检索 不 同 的 子 串 。 


<html> 

<body> 

<script type="text/javascript"> 

var str="Hello world!" 

document .write(str.match ("world")+"<br/>") 
document .write(str.match ("World")+"<br/>") 
document .write(str.match ("worlld")+"<br/>") 
document .write(str.match ("world!")) 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-12 所 示 。 


图 7-12 程序 运行 结果 


7.3.2 ”案例 一 一 Math 对 象 的 属性 
Math 对 象 的 属性 是 数学 中 常用 的 常量 ， 如 表 7-3 所 示 。 
表 7-3 Math 对 象 的 属性 


属 性 作 用 
E 返回 算术 常量 e， 即 自然 对 数 的 底数 ( 约 等 于 2.718) 
LN2 返回 2 的 自然 对 数 ( 约 等 于 0.693) 
LN10 返回 10 的 自然 对 数 ( 约 等 于 2.302) 
LOG2E 返回 以 2 为 底 的 e 的 对 数 ( 约 等 于 1.414) 
LOGI10E 返回 以 10 为 底 的 e 的 对 数 ( 约 等 于 0.434) 
PI 返回 圆周 率 ( 约 等 于 3.14159) 
SQRTI1 2 返回 2 的 平方 根 的 倒数 ( 约 等 于 0.707) 
SQRTI2 返回 2 的 平方 根 ( 约 等 于 1.414) 
【 例 7.13】 (实例 文件 :ch07\7.13.htmDMath 对 象 属性 的 综合 应 用 。 
<html> 
<body> 
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<script type="text/javascript"> 
Var numVarl=Math.E 
document .write("E 属性 应 用 后 的 计算 结果 为 : " +numVarl); 
document .write ("<br>"); 
document .write ("<br>"); 
Var numVar2=Math.LN2 
document .write ("LN2 属性 应 用 后 的 计算 结果 为 : " +numVar2); 
document .write ("<br>"); 
document .write ("<br>"); 
Var numVar3=Math.LN10 
document .write ("LN10 属性 应 用 后 的 计算 结果 为 : " +numVar3); 
document .write ("<br>"); 
document .write("<br>"); 
Var numVar4=Math. LOG2E 
document .write ("LOG2E 属性 应 用 后 的 计算 结果 为 : " +numVar4) 7 
document .write ("<br>"); 
document .write ("<br>"); 
Var numVar5=Math. LOG10E 
document .write ("LOG10E 属性 应 用 后 的 计算 结果 为 : " +numVar5); 
document .write ("<br>"); 
document .write ("<br>"); 
var numVar6=Math. PI 
document .write ("PI 属性 应 用 后 的 计算 结果 为 : " +numVar6) ; 
document .write ("<br>"); 
document .write ("<br>"); 
Var numVar7=Math. SORT1 2 
document .write("SORT1 2 属性 应 用 后 的 计算 结果 为 : " +numVar7); 
document .write ("<br>") 7 
document .write("<br>"); 
var numVar8=Math. SQRT2 
document .write ("SQRT2 属性 应 用 后 的 计算 结果 为 : ” +numVar8); 
</script> 
</body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 7-13 所 示 。 
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局 性 应 用 后 的 计算 结 虹 为，2. T18281823459045 
lie 网 性 应 虹 后 的 计算 结果 为 0 e141s0s539s3 
NO 所 性 到 用 后 的 计 和 半生 为，2. 302585039934045 


1 名 质 性 应 用 辣 的 计 息 千 果 为 ,1. 9435350408989633 
lo0105 玫 性 应 用 后 的 计算 时 为 ，0. 4342944819032518 
下 后 性 应 用 后 的 计 簿 结果 为 ，S. 141632553583799 
SETL_x 属 性 应 用 后 的 计算 结果 为，0._ T071057al1s554rs 
ENETz 属 性 应 用 后 的 计算 结果 为 1 .人 142135693T309E1 


图 7-13 程序 运行 结果 


7.3.3 ”Math 对 象 的 方法 
Math 对 象 的 方法 是 数学 中 常用 的 函数 ， 如 表 7-4 所 示 。 
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案例 课 演 四” 
表 7-4 Math 对 象 的 方法 
方志 法 作 用 
abs(x) 返回 数 的 绝对 值 
acos(x) 返回 数 的 反 余弦 值 
asin(x) 返回 数 的 反正 弦 值 
atan(x) 以 介 于 -PL2 与 PU2 弧度 之 间 的 数值 来 返回 x 的 反正 切 值 
atan2(y.x) 返回 从 x 轴 到 点 (x,y) 之 间 的 角度 
ceil(x) 对 数 进行 上 舍 入 
cos(x) 返回 数 的 余弦 
exp(x) 返回 e 的 指数 
floor(x) 对 数 进行 下 舍 入 
log(x) 返回 数 的 自然 对 数 ( 底 为 6) 
max(x.y) 返回 x 和 y 中 的 最 高 值 
min(x,y) 返回 x 和 y 中 的 最 低 值 
pow(x.y) 返回 x 的 y 次 突 
random() 返回 0 一 1 之 间 的 随机 数 
round(x) 把 数 四 舍 五 入 为 最 接近 的 整数 
sin(x) 返回 数 的 正弦 
sqrt(x) 返回 数 的 平方 根 
tan(x) 返回 角 的 正切 
toSource() 返回 该 对 象 的 源 代码 
valueof0 返回 Math 对 象 的 原始 值 


7.4 详解 Math 对 象 常用 的 方法 
下 面 将 详细 讲述 Math 对 象 常用 的 方法 和 技巧 。 


7.4.1 案例 一 一 返回 数 的 绝对 值 
使 用 abs0 方 法 可 返回 数 的 绝对 值 。 其 语法 格式 如 下 : 


Math .abs (x) 
其 中 参数 x 为 必 选 项 ， 且 必须 是 一 个 数值 。 
【 例 7.14】 (实例 文件 : ch07\7.14.htmD) 计 算数 值 的 绝对 值 。 


<html> 
<body> 
<script type="text/javascript"> 


Var numVarl=2 


全? 


Var numVar2=-2 
document .write(" 正 数 2 的 绝对 值 为 : "+ Math.abs (numVar1l) + "<br />") 
document .write ("负数 -2 的 绝对 值 为 : "+ Math.abs (numVar2)) 

</script> 

</body> 

</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 7-14 所 示 。 
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7.4.2 ”案例 一 一 返回 数 的 正弦 值 、 正 切 值 和 余弦 值 


使 用 Math 对 象 中 的 方法 可 以 计算 指定 数值 的 正弦 值 、 正 切 值 和 余弦 值 。 
1. 计算 指定 数值 的 正弦 值 
使 用 sin0 方 法 可 以 计算 指定 数值 的 正弦 值 。 其 语法 结构 如 下 : 


Math.sin (x) 


参数 x 为 必 选 项 ， 是 一 个 以 弧度 表示 的 角 。 将 角度 乘 以 0.017453293(2PL360) 即 可 转换 为 
弧度 。 
【 例 7.1S】 (实例 文件 :ch07\7.15.htmD 计 算数 值 的 正弦 值 。 


<html> 
<body> 
<script type="text/javascript"> 
Var numVar=2; 
Var numVarl=0.5; 
var numVar2=-0.6; 
document .write ("0.5 的 正弦 值 为 : "+Math.sin (numVarl) + "<br />") 
document .write ("2 的 正弦 值 为 : "+Math.sin (numVar) + "<br />") 
document .write("-0.6 的 正弦 值 为 : "+Math.sin (numVar2) + "<br />") 
</script> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-15 所 示 。 
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图 7-15 程序 运行 结果 
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2. 计算 指定 数值 的 余弦 值 
使 用 cos0 方 法 可 以 计算 指定 数值 的 余弦 值 。 其 语法 结构 如 下 : 


Math.cos (x) 


参数 x 为 必 选 项 ， 必 须 是 一 个 数值 。 
【 例 7.16】 (实例 文件 ， ch07\7.16.htmD 计 算数 值 的 余弦 值 。 


<html> 
<body> 
<script type="text/javascript"> 
Var numVar=2; 
var numVarl=0.5; 
var numVar2=-0.6; 
document .write ("0.5 的 余弦 值 为 : "+Math.cos (numVarl) + "<br />") 
document .write ("2 的 余弦 值 为 : "+Math . cos (numVar) + "<br />") 
document .write("-0.6 的 余弦 值 为 : "+Math .cos (numVar2) + "<br />") 
</script> 
</body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 7-16 所 示 。 
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图 7-16 程序 运行 结果 
3. 计算 指定 数值 的 正切 值 
使 用 tan0 方 法 可 以 计算 指定 数值 的 正切 值 。 其 语法 结构 如 下 : 


Math.tan (x) 


参数 x 为 必 选 项 ， 是 一 个 以 弧度 表示 的 角 。 将 角度 乘 以 0.017453293(2PL360) 即 可 转换 为 
弧度 。 
【 例 7.17】 (实例 文件 : ch07\7.17.htmD) 计 算数 值 的 正切 值 。 


<html> 
<body> 
<script type="text/javascript"> 
Var numVar=2; 
var numVarl=0.5; 
var numVar2=-0.6; 
document .write ("0.5 的 正切 值 为 : "+Math.tan (numVarl) + "<br />") 
document .write ("2 的 正切 值 为 : "+Math.tan (numVar) + "<br />") 
document .write("-0.6 的 正切 值 为 : "+Math.tan (numVar2) + "<br />") 
</script> 
</body> 
</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 7-17 所 示 。 
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0.5 的 正切 秆 为 ，0. 5463024838437305 
2 的 正切 信 为 ，-2. 185039853261513 
也 5 的 正切 人 为 : -0. 6341363083416923 


图 7-17 程序 运行 结果 
7.4.3 ”案例 一 一 返回 数 的 反正 弦 值 、 正 切 值 和 余弦 值 


使 用 Math 对 象 中 的 方法 可 以 计算 指定 数值 的 反正 弦 值 、 反 正切 值 和 反 余 弦 值 。 
1. 计算 指定 数值 的 反正 弦 值 
使 用 asin() 方 法 可 以 计算 指定 数值 的 正弦 值 。 其 语法 结构 如 下 : 


Math. asin (x) 
参数 x 为 必 选 项 ， 且 必须 是 一 个 数值 ， 该 值 介 于 -1.0 一 1.0 之 间 。 


全 了 如 果 参 数 x 超过 了 -1.0~1.0 的 范围 ， 那 么 浏览 器 将 返回 NaN。 如 果 参 数 x 取 
六。” 值 1， 那 么 将 返回 PI2。 


【 例 7.18】 (实例 文件 : ch07\7.18.htmD 计 算数 值 的 反正 弦 值 。 


<html> 
<body> 
<script type="text/javascript"> 
var numVar=2; 
Var numVarl=0.5; 
var numVar2=-0.6; 
Var numVar3=17 
document .write ("0.5 的 反正 弦 值 为 : "+Math.asin (numVarl) + "<br />") 
document .write ("2 的 反正 弦 值 为 : "+Math.asin (numVar) + "<br />") 
document .write("-0.6 的 反正 弦 值 为 : "+Math.asin (numVar2) + "<br />") 
document .write ("1 的 反正 弦 值 为 : "+Math.asin (numVar3) + "<br />") 
</script> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-18 所 示 。 
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图 7-18 程序 运行 结果 
2. 计算 指定 数值 的 反正 切 值 
使 用 atan0 方 法 可 以 计算 指定 数值 的 反正 切 值 。 其 语法 格式 如 下 : 
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Math. atan (x) 


其 中 ， 参 数 x 为 必 选 项 ， 这 里 指 需要 计算 反正 切 值 的 数值 。 
【 例 7.19】 (实例 文件 : ch07\7.19.htmD 计 算数 值 的 反正 切 值 。 


<html> 
<body> 
<script type="text/javascript"> 
Var numVar=27 
Var numVarl=0.5; 
Var numVar2=-0.6; 
Var numVar3=17 
document .write ("0.5 的 反正 切 值 为 : "+Math.atan (numVarl) + "<br />") 
document .write ("2 的 反正 切 值 为 : "+Math.atan (numVar) + "<br />") 
document .write("-0.6 的 反正 切 值 为 : "+Math.atan (numVar2) + "<br />") 
document .write ("1 的 反正 切 值 为 : "+Math.atan (numVar3) + "<br />") 
</script> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-19 所 示 。 
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0.5 的 反正 切 情 为 ，0. 4636476030008061 


2 全 反正 切 值 为 ，1. 1071437177940904 
-0. 5 的 原 正 切 值 为 ，-0. 5404135002705842 
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图 7-19 程序 运行 结果 
3. 计算 指定 数值 的 反 余弦 值 
使 用 acos0 方 法 可 以 计算 指定 数值 的 反 余弦 值 。 其 语法 结构 如 下 : 


Math. acos (x) 
参数 x 为 必 选 项 ， 且 必须 是 一 个 数值 ， 该 值 介 于 -1.0 一 1.0 之 间 。 


@3 如 果 参 数 x 超过 了 -1.0~1.0 的 范围 ， 那 么 浏览 器 将 返回 NaN。 如 果 参 数 x 取 
放 往 。 值 1， 于 么 将 返回 0。 


【 例 7.20】 (实例 文件 ，ch07\7.20.html) 计 算数 值 的 反 余弦 值 。 


<html> 
<body> 
<script type="text/javascript"> 
Var numVar=2; 
Var numVarl=0.5; 
var numVar2=-0.6; 
var numVar3=1; 
document .write ("0.5 的 反 余弦 值 为 : "+Math.acos (numVar1) + "<br />") 
document .write ("2 的 反 余弦 值 为 : "+Math.acos (numVar) + "<br />") 
document .write("-0.6 的 反 余弦 值 为 : "+Math.acos (numVar2) + "<br />") 
document .write ("1 的 反 余弦 值 为 : "+Math.acos (numVar3) + "<br />") 
</script> 


</body> 
</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 7-20 所 示 。 
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图 7-20 程序 运行 结果 
7.4.4 案例 一 一 返回 两 个 或 多 个 参数 中 的 最 大 值 或 最 小 值 
使 用 max( 方 法 可 返回 两 个 指定 的 数 中 带 有 较 大 的 值 的 那个 数 。 其 语法 格式 如 下 : 


Math.max(x...) 


其 中 参数 x 为 0 或 多 个 值 。 其 返回 值 为 参数 中 最 大 的 数值 。 
使 用 min0 方 法 可 返回 两 个 指定 的 数 中 带 有 较 小 的 值 的 那个 数 。 其 语法 格式 如 下 : 


Math.min(x...) 


其 中 参数 x 为 0 或 多 个 值 。 其 返回 值 为 参数 中 最 小 的 数值 。 
【 例 7.21】 (实例 文件 ，ch07\7.21.htmD) 返 回 参数 当中 的 最 大 值 或 最 小 值 。 


<html> 
<body> 
<script type="text/javascript"> 
Var numVar=2; 
Var numVarl=0.5; 
var numVar2=-0.6; 
Var numVar3=17 
document .write("2、 0.5、-0.6、1 中 最 大 的 值 为 : "+ Math.max (numVar, 
numVarl,numVar2,numVar3) + "<br />") 
document .write ("2、0.5、-0.6、1 中 最 小 的 值 为 : "+ Math.min (numVar, 
numVarl,numVar2,numVar3) + "<br />") 
</script> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-21 所 示 。 


CD sn PD - Ox | euwewsnric > 
文件 从 ”元吉 5 至 矢 N】 六 硬 扩 ) 工 站 过 区 IH) 


2、0.5、-0.5、1 中 最 大 的 信 为 ，2 
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7.4.5 “案例 一 一 计算 指定 数值 的 平方 根 
使 用 sqrt0 方 法 可 返回 一 个 数 的 平方 根 。 其 语法 结构 如 下 : 


Math.sqrt (x) 


其 中 参数 x 为 必 选 项 ， 且 必须 是 大 于 等 于 0 的 数 。 计 算 结 果 的 返回 值 是 参数 x 的 平方 
根 。 如 果 x 小 于 0， 则 返回 NaN。 
【 例 7.22】 (实例 文件 : ch07\7.22.htmD 计 算 指 定数 值 的 平方 根 。 


<html> 
<body> 
<script type="text/javascript"> 
Var numVar=27 
Var numVarl=0.5; 
Var numVar2=-0.6; 
Var numVar3=17 
document .write ("2 的 平方 根 为 ， "+ Math. sqrt (numVar) + "<br />") 
document .write("0.5 的 平方 根 为 : "+ Math. sqrt (numVarl) + "<br />") 
document .write("-0.6 的 平方 根 为 : "+ Math. sqrt (numVar2) + "<br />") 
document .write ("1 的 平方 根 为 : "+ Math. sqrt (numVar3) + "<br />") 
</script> 
</body> 
</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 7-22 所 示 。 


一 站 HAUserswAdminis PD - © X | @ HUsers administr.. x 
文件 (F) _ 奖 太 (E) 下 看 (V) 收 写 妆 (A) 工具 TT) 帮助 (H) 


2 的 平方 根 为 ，1. 4142135623730951 
0. 5 的 平方 根 为 ，0. 7071067811865476 
-0.6 的 平 力 根 为 ，Nal 

1 的 平方 根 为 ，1 


图 7-22 程序 运行 结果 
7.4.6 ”案例 一 一 数值 的 客运 算 
使 用 pow0 方 法 可 返回 x 的 y 次 宕 的 值 。 其 语法 结构 如 下 


Math.pow (x, y) 

其 中 参数 x 为 必 选 项 ， 是 底数 ， 且 必须 是 数字 。y 也 为 必 选 项 ， 是 寡 数 ， 且 必须 是 数字 。 
5 到 | 果 结 果 是 虚数 或 负数 ， 则 该 方法 将 返回 NaN。 如 果 由 于 指数 过 大 而 引起 浮 
半点 溢出 ， 则 该 方法 将 返回 Infinity。 

【 例 7.23】 (实例 文件 : ch07\7.23.htmlD) 数 值 的 雳 运算 。 


<html> 
<body> 


全 1 


<script type="text/javascript"> 
document .write ("0 的 0 次 宕 为 : "+ Math.pow(0,0) + "<br />") 
document .write ("0 的 1 次 寡 为 : "+Math.pow(0,1) + "<br />") 
document .write ("1 的 1 次 究 为 : "+Math.pow(1,1) + "<br />") 
document .write ("1 的 10 次 寡 为 : "+Math.pow(1,10) + "<br />") 
document .write ("2 的 3 次 寡 为 : "+Math.pow(2,3) + "<br />") 
document .write("-2 的 3 次 究 为 : "+Math.pow(-2,3) + "<br />") 
document .write ("2 的 4 次 究 为 : "+Math.pow(2,4) + "<br />") 
document .write("-2 的 4 次 寡 为 : "+Math.pow(-2,4) + "<br />") 

</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-23 所 示 。 


站 HUsersAdminist PD ~ OX | 各 HiusersAdmiristr- 
文件 (站 闫 坟 FE) 可 看 V) 收 富 闪 (A) 工具 T) 帮 肥 (H) 


0 的 0 次 土 为 :1 
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图 7-23 程序 运行 结果 


7.4.7 ”案例 一 一 计算 指定 数值 的 对 数 
使 用 log0 方 法 可 返回 一 个 数 的 自然 对 数 。 其 语法 结构 如 下 : 


Math.1og (x) 


其 中 参数 x 为 必 选 项 ， 可 以 是 任意 数值 或 表达 式 ， 但 必须 大 于 0。 其 返回 值 为 x 的 自然 


对 数 。 
【 例 7.24】 (实例 文件 :ch07\7.24.htmD 计 算 指 定数 值 的 对 数 。 
<html> 
<body> 


<script type="text/javascript"> 
document .write ("2.7183 的 对 数 为 : "+ Math.log(2.7183) + "<br />") 
document .write ("2 的 对 数 为 : "+ Math.log(2) + "<br />") 
document .write ("1 的 对 数 为 : "+ Math.log(1) + "<br />") 
document .write ("0 的 对 数 为 : "+Math.1og(0) + "<br />") 
document .write("-1 的 对 数 为 : "+Math.1og(-1)) 
</script> 
</body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 7-24 所 示 。 


JavaScript 动 态 网 站 开发 
案例 课 党 >… 


ox Bruen 


Er 


2. 13 的 对 数 为 : 1. 0000055849133877 


图 7-24 程序 运行 结果 
7.4.8 案例 一 一 取 整 运算 
使 用 round0 方 法 可 把 一 个 数字 合 入 为 最 接近 的 整数 。 其 语法 结构 如 下 : 


Math.round (x) 


其 中 参数 x 必 选 项 ， 且 必须 是 数字 。 其 中 参数 的 返回 值 是 与 x 最 接近 的 整数 。 


|、 2 对 于 0.5， 该 方法 将 进行 上 舍 入 。 例 如 ，3.5 将 舍 入 为 4， 而 -3.5 将 舍 入 为 
RN = 


A 【 例 7.25】 (实例 文件 ，ch07\7.25.htmD) 取 整 运算 。 


<html> 

<body> 

<script type="text/javascript"> 
document .write("0.60 取 整 后 的 数值 为 : "+Math.round (0.60) + "<br />") 
document .write ("0.50 取 整 后 的 数值 为 : "+Math.round(0.50) + "<br />") 
document .write ("0.49 取 整 后 的 数值 为 : "+Math.round(0.49) + "<br />") 
document .write("-4.40 取 整 后 的 数值 为 : "+Math.round(-4.40) + "<br />") 
document .write("-4.60 取 整 后 的 数值 为 : "+Math.round(-4.60) ) 

</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-25 所 示 。 


国 HAueerswdminit P ~ GX 
HP RR BBV) Sa) IRN RD 


.49 本 总 乒 的 远 值 力 ，D 
人 增 
下 .60 职 整 后 的 数值 为 ，-5 


图 7-25 程序 运行 结果 
7.4.9 案例 一 一 生成 0 到 1 之 间 的 随机 数 
使 用 random0 方 法 可 返回 介 于 0~1 之 间 的 一 个 随机 数 。 其 语法 格式 如 下 : 


售 180 


/小 


Math.random() 


其 返回 值 为 0.0 一 1.0 之 间 的 一 个 伪 随 机 数 。 
【 例 7.26】 (实例 文件 :ch07\7.26.htmD) 生 成 0 到 1 之 间 的 随机 数 。 


<html> 

<body> 

<script type="text/javascript"> 
document .write ("0 到 1 之 间 的 第 一 次 随机 数 为 : "+Math.random()+ "<br />") 
document .write ("0 到 1 之 间 的 第 二 次 随机 数 为 : "+Math.random()+ "<br />") 
document .write ("0 到 1 之 间 的 第 三 次 随机 数 为 : "+Math.random()) 

</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-26 所 示 。 


山 妆 业 炎 朵 证 炎 一 冰 当 贿 翌 下 1duoSeAer_ 才 


GG 


全 HAVseripdminis P ~ © X | BG Hvsers dminis.. > 
文 伯 站 淹 款 E)】 主要 MV| 次 而) 工具 (7) 要 ROH) 


| 啊 上 1 之 间 的 第 一 lh 0. 8434624734996336 
只 有数 为 ，0. 3780485085697377 
0 到 1 之 / 旧 的 第 三 次 随机 于 为 ，0. 44258514505181414 


图 7-26 程序 运行 结果 
7.4.10 ”案例 一 一 根据 指定 的 坐标 返回 一 个 弧度 值 
使 用 atan20 方 法 可 返回 从 x 轴 到 点 (xy) 之 间 的 角度 。 其 语法 结构 如 下 : 


Math.atan2 (y, x) 


其 中 ， 各 参数 的 含义 如 下 。 

e@ ”x 为 必 选 项 。 指 定点 的 x 坐标。 

@ Jy 为 必 选项 。 指 定点 的 y 坐标 。 

其 返回 值 为 -PI 到 PI 之 间 的 值 ， 是 从 XX 轴 正 向 逆 时 针 旋 转 到 点 (x,y) 时 经 过 的 角度 。 


mi? 
i 注 该 函数 的 参数 顺序 是 ，y 坐标 在 x 坐标 之 前 传递 。 
意 
【 例 7.27】 (实例 文件 ，ch07\7.27.html) 计 算 指 定 的 坐标 ， 并 返回 一 个 弧度 值 。 
<html> 
<body> 


<script type="text/javascript"> 
document .write (Math.atan2(0.50,0.50) + "<br />") 
document .write (Math.atan2(-0.50,-0.50) + "<br />") 
document .write (Math.atan2(5,5) + "<br />") 
document .write (Math.atan2(10,20) + "<br />") 
document .write (Math.atan2(-5,-5) + "<br />") 
document .write (Math.atan2(-10,10)) 

</script> 
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</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-27 所 示 。 
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7-27 “程序 运行 结果 
7.4.11 案例 一 一 返回 大 于 或 等 于 指定 参数 的 最 小 整数 


使 用 ceil0 方 法 可 对 一 个 数 进行 上 舍 入 ， 也 就 是 返回 大 于 或 等 于 指定 参数 的 最 小 值 。 其 语 
法 格式 如 下 : 


Math.ceil (x) 


参数 x 为 必 选 项 ， 且 必须 是 一 个 数值 。 其 返回 值 是 大 于 等 于 x， 并 且 与 它 最 接近 的 整数 。 
【 例 7.28】 (实例 文件 :ch07\7.28.htmD) 返 回 大 于 或 等 于 指定 参数 的 最 小 整数 。 


<html> 

<body> 

<script type="text/javascript"> 
document .write ("0.60 的 ceil 值 为 : "+Math.ceil(0.60) + "<br />") 
document .write ("0.40 的 ceil 值 为 : "+Math.ceil(0.40) + "<br />") 
document .write ("5 的 ceil 值 为 : "+Math.ceil(5) + "<br />") 
document .write ("5.1 的 ceil 值 为 : "+Math.ceil(5.1) + "<br />") 
document .write("-5.1 的 ceil 值 为 : "+Math.ceil(-5.1) + "<br />") 
document .write("-5.9 的 ceil 值 为 : "+Math.ceil(-5.9)) 

</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-28 所 示 。 


CB Donn Do- ox | Bremer « 
文体) 如 罚 (5) 各 在 (Vi 。 多 辣 关 A) 工 呈 和 m) 其 动 (H) 


.60 的 ceil 值 为 ，! 
D0. 40 的 ceil 值 为 


图 7-28 程序 运行 结果 
7.4.12 ”案例 一 一 返回 小 于 或 等 于 指定 参数 的 最 大 整数 
使 用 floor0 方 法 可 对 一 个 数 进行 下 舍 入 ， 即 返回 小 于 或 等 于 指定 参数 的 最 大 值 。 其 语法 


二 
全 ie 


a 


格式 如 下 : 


Math. floor (x) 


参数 x 为 必 选 项 ， 且 必须 是 一 个 数值 。 其 返回 值 是 小 于 等 于 x， 并 且 与 它 最 接近 的 整数 。 
【 例 7.29】 (实例 文件 ，ch07\7.29.htmD) 返 回 小 于 或 等 于 指定 参数 的 最 大 整数 。 


<html> 

<body> 

<script type="text/javascript"> 
document .write ("0.60 的 floor 值 为 : "+Math. floor (0.60) + "<br />") 
document .write ("0.40 的 floor 值 为 : "+Math. floor (0.40) + "<br />") 
document .write ("5 的 floor 值 为 : "+Math. floor (5) + "<br />") 
document .write ("5.1 的 floor 值 为 : "+Math. floor (5.1) + "<br />") 
document .write("-5.1 的 floor 值 为 : "+Math. floor (-5.1) + "<br />") 
document .write("-5.9 的 floor 值 为 : "+Math. floor (-5.9)) 

</script> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-29 所 示 。 
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图 7-29 程序 运行 结果 
7.4.13 ”案例 一 一 返回 以 e 为 基数 的 过 
使 用 exp0 方 法 可 返回 e 的 x 次 寡 的 值 。 其 语法 格式 如 下 ; 


Math .exp (x) 


其 中 参数 x 为 必 选 项 ， 可 以 是 任意 数值 或 表达 式 ， 被 用 作 指 数 。 
其 返回 值 为 e 的 x 次 究 。e 代表 自然 对 数 的 底数 ， 其 值 近似 为 2.71828。 
【 例 7.30】 (实例 文件 :ch07\7.30.htmD) 返 回 以 e 为 基数 的 寡 。 


<html> 

<body> 

<script type="text/javascript"> 

document .write ("1 的 宕 为 : "+Math .exp (1) + "<br />") 
document .write("-1l 的 寡 为 : "+Math .exp (-1) + "<br />") 
document .write("5 的 寡 为 : "+Math .exp (5) + "<br />") 
document .write("10 的 宕 为: "+Math .exp (10) + "<br />") 
</script> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 7-30 所 示 。 
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图 7-30 程序 运行 结果 
7.5 “实战 演练 一 一 使 用 Math 对 象 设 计 程 序 
设计 程序 ， 单 击 【 随 机 数 】 按 钮 ， 使 用 Math 对 象 的 random 方法 产生 一 个 0 一 100 之 间 


( 含 0 和 100) 的 随机 整数 ， 并 在 窗口 中 显示 ， 如 图 7-31 所 示 。 单 击 【 计 算 】 按 钮 ， 计 算 该 随机 
数 的 平方 、 平 方 根 和 自然 对 数 ， 保 留 2 位 小 数 ， 并 在 窗口 中 显示 ， 如 图 7-32 所 示 。 


Tl 
【¢ EC Er a Ee Sn 
二 户 Eee 
Er 
区 次 各 
图 7-31 产生 的 随机 整数 图 7-32 计算 结果 
具体 操作 步骤 如 下 。 
EEID)p 创建 HTML 文件 ， 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<title> 随 机 产生 整数 ， 并 计算 其 平方 、 平 方 根 和 自然 对 数 </title> 
</head> 
<body> 


<form action="" method="post" name="myform" id="myform"> 
<input type="button"” value=" 随 机 数 "> 
<input type="button" value=" 计 算 "> 

</form> 

</body> 

</html> 


ET 在 HTML 文件 的 head 部 分 ， 键 入 以 下 代码 : 


<script> 
var data; // 声 明 全 局 变量 ， 保 存 随机 产生 的 整数 
/* 随 机 数 函数 */ 
function getRandom(){ 
data=Math.floor (Math.random()*101); // 产 生 0~100 随机 数 


alert ("随机 整数 为 : "+data); // 
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/* 随 机 整数 的 平方 、 平 方 根 和 自然 对 象 */ 


function call(){ 


Var square=Math.pow (data, 2); // 计 算 随机 整数 的 平方 
Var squareRoot=Math.sqrt (data) .toFixed(2); // 计 算 随机 整数 的 平方 根 
var logarithm=Math.1log(data) .toFixed (2); // 计 算 随 机 整数 的 自然 对 数 


alert ("随机 整数 "+data+" 的 相关 计算 \n 平方 \t 平方 根 \t 自然 对 数 
\n"+square+"\t"+squareRoot+"\t"+logarithm); 


// 输 出 计算 结果 
} 
</script> 


为 【随机 数 】 按 钮 和 【计算 】 按 钮 添加 单 击 (onClick) 事 件 ， 分 别 调用 随机 数 函 数 
(getRandom) 和 计算 函数 (cal))。 将 HTML 文件 中 <input type="button" value=" 随 机 数 "> 
和 <input type="button" value=" 计 算 "> 这 两 行 代码 修改 成 以 下 内 容 : 


<input type="button™" value=" 随 机 数 " onClick="getRandom()"> 
<input type="button™" value=" 计 算 " onClick="cal ()"> 


EEC 保存 网 页 ， 运 行程 序 ， 浏 览 最 终 效果 。 


7.6 ” 跟 我 练 练 手 


1. 练习 目标 

E 够 熟练 掌握 本 章 所 讲 内 容 。 

2. 上 机 练习 

练习 1: Number 对 象 的 创建 方法 。 
练习 2: Number 对 象 的 常用 方法 。 
练习 3: Math 对 象 的 创建 方法 。 
练习 4: Math 对 象 的 使 用 方法 。 


7.7 高 手 甜 点 


甜点 1: Math 对 象 与 Date、String 对 象 有 什么 不 同 ? 


三 者 主要 有 以 下 两 点 区 别 。 

(1) Math 对 象 并 不 像 Date 和 String 对 象 那 样 是 对 象 的 类 ， 因 此 它 没 有 构造 函数 
Math0。 像 Math.sin( 这 样 的 函数 只 是 函数 ， 不 是 某 个 对 象 的 方法 ， 因 此 无 须 创建 它 ， 通 过 
把 Math 作为 对 象 使 用 就 可 以 调用 其 所 有 属性 和 方法 。 

(2) Math 对 象 不 存储 数据 ，String 与 Date 对 象 存储 数据 。 
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甜点 2: 如 何 表 示 对 象 的 源 代码 ? 
使 用 toSource0 方 法 可 以 表示 对 象 的 源 代码 。 该 方法 通常 由 JavaScript 在 后 台 自 动 调 用 ， 
并 不 显 式 地 出 现在 代码 中 。 其 语法 格式 如 下 : 


object.toSource () 


目前 只 有 Firefox 支持 该 方法 ， 像 正 、Safari、Chrome 和 Opera 等 浏览 器 均 不 支持 该 
方法 。 


~ 
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8.1 常见 的 错误 和 异常 


错误 和 异常 是 编程 中 经 常 出 现 的 问题 。 常 见 的 错误 和 异常 主要 有 以 下 几 种 。 

1. 拼写 错误 

编写 代码 时 要 求 程序 员 要 非常 地 仔细 ， 并 且 在 编写 完 代码 后 还 要 认真 地 去 检查 ， 以 免 出 
现 编写 上 的 错误 。 

在 JavaScript 中 方法 和 变量 都 是 区 分 大 小 写 的， 例如 把 else 写成 ELSE， 将 Array 写成 
array， 这 些 都 会 出 现 语法 错误 。JavaScript 中 的 变量 或 者 方法 命名 规则 通常 都 是 首 字母 小 写 ， 
如 果 是 由 多 个 单词 组 成 的 ， 那 么 除了 第 一 个 单词 的 首 字母 小 写 外 ， 其 余 单 词 的 首 字母 都 应 大 
写 ， 而 其 余 字 母 都 是 小 写 。 知 道 这 些 规则 ， 程 序 员 就 可 以 避免 大 小 写 的 错误 。 

另外 ， 有 时 在 编写 代码 时 需要 输入 中 文字 符 ， 编 程 人 员 容易 在 输入 完 中 文字 符 后 忘记 切 
换 输入 法 ， 从 而 导致 输入 的 小 括号 、 分 号 或 者 引号 等 出 现 错误 。 当 然 ， 这 种 错误 输入 在 大 多 
数 编程 软件 中 显示 的 颜色 会 跟 正 确 的 输入 显示 的 颜色 不 一 样 ， 虽 然 容 易 被 发 现 ， 但 还 是 应 该 
细心 谨慎 地 减少 错误 的 出 现 。 


2. 单 引 号 和 双 引 号 的 混乱 


单 引号 和 双 引 号 在 JavaScript 中 没有 特殊 的 区 别 ， 都 可 以 用 来 创建 字符 串 。 但 作为 一 般 性 
规则 ， 大 多 数 开发 人 员 喜 欢 用 单 引 号 而 不 是 双 引 号 ， 而 在 XHTML 规范 中 要 求 所 有 属性 值 都 
必须 使 用 双 引 号 括 起 来 。 这 样 一 来 ， 如 果 在 JavaScript 中 使 用 单 引 号 ， 而 在 XHTML 中 使 用 双 
引号 就 会 使 混合 两 者 代码 的 编程 显得 更 清晰 。 单 引号 可 以 包含 双 引 号 ， 同 理 ， 双 引号 也 可 以 
包含 单 引号 。 


3. 括号 使 用 混乱 

在 JavaScript 中 ， 括 号 包含 两 种 语义 ， 它 可 以 是 分 隔 符 ， 也 可 以 是 表达 式 。 例 如 : 

(1) 在 “(1+4)*4=20” 中 ， 括 号 就 起 分 隔 符 的 作用 。 

(2) 在 (function0f)0: 中 ，function 之 前 的 一 对 括号 起 分 隔 符 的 作用 ， 后 面 的 括号 则 表示 
立即 执行 这 个 方法 。 

4. 等 号 与 赋值 混淆 

等 号 与 赋值 符号 混淆 ， 一 般 常 出 现在 if 语句 中 ， 而 且 这 种 错误 在 JavaScript 中 不 会 产生 
错误 信息 ， 所 以 在 查找 错误 时 往往 很 难 被 发 现 。 例 如 以 下 代码 : 


if(s = 1) 
alert ("没有 找到 相关 信息 ") ; 


上 述 代 码 在 逻辑 上 是 没有 问题 的 ， 它 的 运行 结果 是 将 1 赋值 给 了 s。 如 果 运 行 成 功 则 弹出 
对 话 框 ， 而 不 是 对 s 和 1 进行 比较 ， 这 不 符合 开发 者 的 本 意 。 
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8.2 处理 异常 的 方法 


常见 的 处 理 异 常 的 方法 有 两 种 : 使 用 onerror 事件 和 try…catch…finally 模型 。 本 节 将 重 
点 讲述 这 两 种 方法 。 


8.2.1 ”案例 一 一 用 onerror 事件 处 理 异 常 


使 用 onerror 事件 是 一 种 早期 的 标准 的 在 网 页 中 捕获 JavaScript 错误 的 方法 。 需 要 注意 的 
是 ， 目 前 chrome、opera、safari 浏览 器 均 不 支持 该 事件 。 

只 要 页 面 中 出 现 脚本 错误 ， 就 会 产生 onerror 事件 。 如 果 要 利用 onerror 事件 ， 就 必须 
创建 一 个 处 理 错误 的 函数 ， 可 以 把 这 个 函数 叫 作 onerror 事件 处 理 器 (onerror event handler)。 
这 个 事件 处 理 器 需要 用 3 个 参数 来 调用 : msg( 错 误 消 息 )、uzl( 发 生 错误 的 页 面 的 urD)、line( 发 
生 错 误 的 代码 行 )。 

具体 使 用 onerror 的 语法 结构 如 下 : 

<script language="javascript"> 

window.onerror = function(sMessage,sUrl,sLine){ 


alert ("您 调用 的 函数 不 存在 ! ) ; 
return true; // 屏 蔽 系统 事件 


估 宣 灯 承 二 否 1duoSeAe「 一 一 永明 监 下 流花 剖 车 好 8 小 


GG 


3 
</script> 


Sm 浏览 器 是 否 显示 标准 的 错误 消息 ， 取 决 于 onerror 的 返回 值 。 如 果 返 回 值 为 
卸 false， 浏 览 器 的 错误 报告 也 会 显示 出 来 ， 所 以 为 了 隐藏 报告 ， 函 数 需要 返回 
true。 


【 例 8.1】 (实例 文件 ，ch08\8.1.htmD) 使 用 window 对 象 触发 onerror 事件 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.o0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title></title> 
<script language="javascript"> 
window.onerror = function(aMsg,aUrl,aLine){ 
alert ("您 调用 的 函数 不 存在 ! \n" + aMsg + "\nUrl: "+ aUrl +"\n 出 错 行 : " + 
aLine); 
return true; ”// 屏 蔽 系统 事件 
a 
</script> 
</head> 
<body onload="abc();"> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 8-1 所 示 。 
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8-1 程序 运行 结果 
另外 ， 使 用 图 像 对 象 也 可 以 触发 onerror 事件 ， 有 具体 语法 格式 如 下 : 


<script language="javascript"> 

Document . images [0] .onerror = function(sMessage, sUrl,sLine){ 
alert ("您 调用 的 函数 不 存在 ! ) ; 
return true; ”// 屏 蔽 系统 事件 


XN 
> </script> 


NN 其 中 Document.images[0] 表 示 页 面 中 的 第 一 个 图 像 。 
【 例 8.2】 (实例 文件 ，ch08\8.2.html) 使 用 图 像 对 象 触发 onerror 事件 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtmll1/DTD/xhtmll-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>onerror 事件 </title> 
<script language="javascript"> 
function ImgLoad(){ 
document .images[0] .onerror=function(){ 
alert ("您 调用 的 图 像 并 不 存在 \n") ; 

a 
document .images [0] .src="test.gif"; 
</script> 
</head> 

<body onload="ImgLoad()"> 

<img/> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 8-2 所 示 。 


5 在 上 面 的 代码 中 定义 了 一 个 图 像 ， 由 于 没有 定义 图 像 的 src， 所 以 会 出 现 异 
半 。 常 ， 调 用 异常 处 理事 件 ， 会 弹出 错误 提示 对 话 框 。 
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图 8-2 程序 运行 结果 加 
豆 
8.2.2 ”案例 一 一 使 用 “try.…catch...finally” 语 句 处 理 异 党 前 NN 
试 
在 JavaScript 中 ，“try...catch...finally” 语 句 可 以 用 来 捕获 程序 中 某 个 代码 块 中 的 错误 ， 从 江 
同时 还 不 会 影响 代码 的 运行 。 该 语句 的 语法 格式 如 下 : 化 SS 
trY 1{ 
someStatements 


} 

catch (exception){ 
someStatements 

3 

finally { 
someStatements 


该 语句 首先 运行 ty 里 面 的 代码 ， 当 代码 中 任何 一 个 语句 发 生 异常 时 ，try 代码 块 就 结束 
运行 ， 此 时 catch 代码 块 开 始 运行 ， 如 果 最 后 还 有 finally 语句 块 ， 那 么 无 论 try 代码 块 是 否 有 
异常 ， 该 代码 块 都 会 被 执行 。 

【 例 8.3】 (实例 文件 ，ch08\8.3.htmD) 使 用 “try...catch...finally” 语 句 处 理 异常 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> </title> 
<script language="javascript"> 
tryt{ 
document .forms.input.length; 
}catch (exception){ 
alert ("运行 时 有 异常 发 生 ") ; 
}finallyt{ 
alert ("结束 try. . .catch. . .finally 语句 "); 
}</script> 
</head> 
<body > 
</body> 
</html> 
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上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 ， 如 图 8-3 所 示 。 单 击 【 确 定 】 按 钮 ， 最 终 弹 出 
finally 区 域 的 信息 提示 框 ， 如 图 8-4 所 示 。 


企 结束 try..…catch..finally 语 句 


8-3 ”弹出 异常 提示 对 话 框 8-4 “finally 区 域 的 信息 提示 框 


8.2.3 ”案例 一 一 使 用 throw 语句 抛 出 异常 


当 异 常 发 生 时 ， JavaScript 引擎 通常 会 停止 ， 并 生成 一 个 异常 消息 。 而 描述 这 种 情况 的 
技术 术语 是 : JavaScript 将 抛 出 一 个 异常 。 
在 程序 中 使 用 throw 语句 可 以 有 目的 地 抛 出 异常 ， 具 体 的 语法 格式 如 下 : 


throw exception 


其 中 ， 异 常 可 以 是 JavaScript 字符 串 、 数 字 、 逻 辑 值 或 对 象 。 
【 例 8.4】 (实例 文件 ，ch08\8.4.html) 检 测 输入 变量 的 值 。 如 果 值 是 错误 的 ， 将 抛 出 一 个 
异常 。catch 会 捕捉 到 这 个 错误 ， 并 显示 一 段 自 定义 的 错误 消息 。 


<!DOCTYPE html> 
<html> 
<body> 
<script> 
function myFunction() 
{ 
try 
{ 
Var x=document .getElementById("demo") .value; 
SEE enzow " 信 为 空 "; 
if (isNaN (x)) throw "不 是 数字 "; 
if (x>10) throw " 太 大 "; 
if (x<5) throw " 太 小 "; 
} 
catch (err) 
{ 
Var y=document .getElementById ("mess"); 
y.innerHTML=" 错 误 : " + err + "。"; 
’ 
} 
</script> 
<h1> 使 用 throw 语句 抛 出 异常 </h1> 
<p> 请 输入 5 到 10 之 间 的 数字 : </p> 
<input id="demo" type="text"> 
<button type="button"” onclick="myFunction()"> 测 试 输入 值 </button> 
<p id="mess"></p> 
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</body> 
</html> 


在 正 9.0 中 浏览 效果 ， 用 户 可 以 输入 值 进 行 测试 效果 ， 例 如 输入 “20”， 然 后 单 击 【 测 
试 输入 值 】 按 钮 ， 将 弹出 错误 提示 信息 ， 如 图 8-5 所 示 。 


王 二 区 
rr 
XR ME EW GRAN TRT mot 


使 用 throw 语 句 抛 出 异常 


请 输入 5 到 10 之 间 的 数字 : 


名 EY 
错误 ， 太 大 ， 


8-5 ”测试 结果 


8.3 ”使 用 调试 器 


每 种 浏览 器 都 有 自己 的 JavaScript 错误 调试 器 ， 只 是 调试 器 不 同 而 已 。 下 面 将 讲述 常见 的 
调试 器 的 设置 方法 和 技巧 。 


8.3.1 案例 一 一 IE 浏览 器 内 建 的 错误 报告 


如 果 需 要 正 浏览 器 弹出 错误 报告 对 话 框 ， 可 以 设置 正 浏览 器 的 选项 。 单 击 下 浏览 器 中 
的 【工具 】 菜 单项 ， 在 弹出 的 下 拉 菜 单 中 选择 【Intemet 选项 】 命 令 ， 系 统 将 弹出 【Internet 选 
项 】 对 话 框 ， 切 换 到 【高 级 】 选 项 卡 ， 然 后 选中 【显示 每 个 脚本 错误 的 通知 】 复 选 框 ， 最 后 
单 击 【 确 定 】 按 钮 ， 如 图 8-6 所 示 。 

设置 完成 后 ， 运 行 8.3.html 文件 ， 系 统 将 弹出 相应 的 错误 提示 对 话 框 ， 如 图 8-7 所 示 。 
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8-6 【Internet 选项 】 对 话 框 图 8-7 错误 提示 对 话 框 


全" 


JavaScript 动 态 网 站 开发 
案例 课 党 %… 


8.3.2 ”案例 一 一 使 用 Firefox 错误 控制 台 调 试 


在 Firefox 中 可 以 使 用 自 带 的 JavaScript 调试 器 ( 即 Web 控制 台 ) 对 JavaScript 程序 进行 调 
试 。 选 择 Firefox 浏览 器 中 的 【工具 】 菜 单项 ， 在 弹出 的 下 拉 菜 单 中 选择 【Web 开发 者 】 命 
令 ， 在 弹出 子 菜单 中 选择 【Web 控制 台 】 命 令 ， 如 图 8-8 所 示 。 

设置 完成 后 ， 同 样 运行 8.3.html 文件 ， 在 窗口 的 下 方 可 看 到 错误 提示 信息 ， 如 图 8-9 
所 示 。 


EECET PTE-LE 


图 8-8 选择 【Web 控制 台 】 命 令 图 8-9 ”错误 提示 信息 


8.4 JavaScript 语言 调试 技巧 


在 编写 程序 的 过 程 中 ， 异 常 经 常会 出 现 。 本 节 将 讲述 如 何 解 析 和 跟踪 JavaScript 程序 中 的 
异常 。 


8.4.1 案例 一 一 使 用 alert() 语 句 进行 调试 


很 多 情况 下 ， 程 序 员 并 不 能 定位 程序 发 生 错误 引发 的 异常 。 此 时 ， 程 序 员 可 以 将 alert0 语 
句 放 在 程序 的 不 同位 置 ， 用 它 来 显示 程序 中 的 变量 、 函 数 或 者 返回 值 等 ， 从 而 以 跟踪 的 方式 
查找 出 错误 。 

alert0 是 弹出 对 话 框 的 方法 ， 具 体 的 语法 格式 如 下 : 

<script language="javascript"> 


alert (); 
</script> 


例如 以 下 实例 代码 : 


<script language="javascript"> 
Function alertTest(){ 

alert ("程序 开始 处 ! ) ; 

Var a=1237 

Var b=321; 

alert ("程序 执行 过 程 ! ) ; 

b=at+b; 


alert ("程序 执行 结束 ! ) ; 
3 
</script> 


上 述 代码 使 用 alertO 语 句 调试 程序 ， 用 户 可 以 大 致 查询 出 错误 的 位 置 。 但 是 该 方法 也 有 缺 


点 ， 即 如 果 柑 入 太 多 的 alert0 语 句 ， 最 后 要 删除 这 些 语句 时 ， 工 作 量 就 会 增 大 。 
8.4.2 ”案例 一 一 使 用 write() 语 句 进行 调试 


如 果 用 户 想 让 所 有 的 调试 信息 以 列表 的 方式 显示 在 页 面 中 ， 那 么 用 户 可 以 使 用 write0 方 


法 进行 调试 。 
write0 语 句 的 主要 作用 是 将 信息 写 入 页 面 中 ， 具 体 的 语法 格式 如 下 : 


<script language="javascript"> 
document .write(); 
</script> 


例如 以 下 实例 代码 : 


<script language="javascript"> 
Function alertTest()1{ 

document .write ("程序 开始 处 ! ); 
Var a=1237 

Var b=321; 

document .write ("程序 执行 过 程 ! ) ; 
document .write (a+b); 

document .write ("程序 执行 结束 ! ); 
</script> 


8.5 JavaScript 优化 


JavaScript 的 优化 对 象 主要 优化 的 是 脚本 程序 代码 的 下 载 时 间 和 执行 效率 。 因 


为 


JavaScript 运行 前 不 需要 进行 编译 而 直接 在 客户 端 运 行 ， 所 以 代码 的 下 载 时 间 和 执行 效率 直接 
决定 了 网 页 的 打开 速度 ， 进 而 影响 客户 端的 用 户 体验 效果 。 本 节 将 主要 介绍 JavaSeript 优化 的 


一 些 原则 和 方法 。 
8.5.1 案例 一 一 减缓 代码 下 载 时 间 


给 JavaScript 代码 进行 “减肥 ”是 减缓 代码 下 载 时 间 的 一 个 非常 重要 的 原则 。 给 代码 “ 减 
肥 ” 就 是 在 将 工程 上 传 到 服务 器 前 ， 尽 量 缩短 代码 的 长 度 ， 去 除 不 必要 的 字符 ， 包 括 注 释 、 


不 必要 的 空格 、 换 行 等 。 例 如 以 下 代码 : 


function getUsersMessage(){ 
for (var i=0;i<10;i++){ 
if (i%2==0){ 
document .write (i+"™" ™); 


， 


人 
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} 

和. 

对 于 上 述 代码 可 以 被 优化 为 以 下 代码 : 

function getUsersMessage () {for(var 

i=0;i<10;i++) {if (i%2==0) {document .write(i+" "™);}}} 

上 述 代 码 还 可 以 进一步 优化 ， 即 在 将 代码 提交 到 服务 器 之 前 ， 为 了 提高 可 读 性 ， 之 前 长 
的 变量 名 、 函 数 名 都 可 以 进行 重新 命名 。 例 如 可 将 函数 名 getUsersMessage0 重 新 命名 为 a()。 

此 外 ， 在 使 用 布尔 值 tue 和 false 时 ， 可 以 分 别 用 “1” 和 “0” 来 蔡 换 它 们 ， 在 一 些 条 件 
语句 中 ， 可 以 使 用 逻辑 非 操作 符 “! ”来 蔡 换 ， 定 义 数 组 时 使 用 的 new array0 可 以 用 “[]” 蔡 
换 ， 等 等 。 这 样 可 以 节省 不 少 空间 。 例 如 以 下 代码 : 

tr i OO 

Var myarray=new Array(1,2); 

对 上 述 代码 可 以 使 用 以 下 代码 替换 : 

ELESEEJTAAT 

Var myarray=[1,2]; 

另外 ，JavaScript 还 有 一 些 非常 实用 的 “减肥 工具 ”， 有 时 可 以 将 几 百 行 的 代码 缩短 成 一 
行 ， 感 兴趣 的 读者 可 以 查阅 相关 资料 进行 试验 。 


8.5.2 ”案例 一 一 合理 声明 变量 


在 JavaScript 中 ， 变 量 的 声明 方式 可 分 为 显 式 声明 和 隐 式 声明 。 使 用 var 关键 字 进 行 声明 
的 就 是 显 式 声明 ， 而 没有 使 用 var 关键 字 的 就 是 隐 式 声明 。 在 函数 中 显 式 声明 的 变量 为 局 部 
变量 ， 隐 式 声 明 的 变量 为 全 局 变量 。 例 如 以 下 代码 : 


function testl()1{ 
Var a=07 
b=1; 

. 

上 述 代码 在 声明 变量 a 时 使 用 了 var 关键 字 ， 为 显 式 声明 ， 所 以 a 为 局 部 变量 ， 而 在 声明 
变量 b 时 没有 使 用 var 关键 字 ， 为 隐 式 声明 ， 所 以 b 为 全 局 变量 。 在 JavaScript 中 ， 局 部 变量 
只 在 其 所 在 函数 执行 时 生成 的 调用 对 象 中 存在 ， 当 其 所 在 函数 执行 完毕 时 局 部 变量 就 会 被 立 
即 销毁 ， 而 全 局 变量 在 整个 程序 的 执行 过 程 中 都 存在 ， 直 到 浏览 器 关闭 后 才 被 销毁 。 例 如 在 
上 述 的 函数 执行 完毕 后 ， 再 分 别 执行 函数 test20 和 test30): 

function test2(){ 


alert (a); 

. 

function test3(){ 
alert (b); 

} 


运行 上 述 函数 会 发 现 : test20 函 数 运行 时 会 报错 ， 浏 览 器 会 提示 变量 a 未 被 声明 ; 而 
test30) 函 数 可 以 被 顺利 地 执行 。 这 说 明 在 执行 了 test10 函 数 后 ， 局 部 变量 a 立即 被 销毁 了 ， 而 


全 局 变量 b 还 存在 。 所 以 为 了 节省 系统 资源 ， 即 使 不 需要 全 局 变量 ， 也 要 在 函数 体 中 使 用 var 
关键 字 来 声明 变量 。 


8.5.3 ”案例 一 一 使 用 内 置 函数 缩短 编译 时 间 


与 C、Java 等 语言 一 样 ，JavaScript 也 有 自己 的 函数 库 ， 并 且 函 数 库 里 有 很 多 内 置 函 数 ， 
用 户 可 以 直接 调用 这 些 函 数 。 当 然 ， 开 发 人 员 也 可 以 自己 去 编写 函数 ， 但 是 JavaScript 中 的 内 
置 函 数 的 属性 方法 都 是 经 过 C、C++ 之 类 的 语言 编译 的 ， 而 开发 者 自己 编写 的 函数 在 运行 前 还 
要 进行 编译 ， 所 以 在 运行 速度 上 ，JavaScript 的 内 置 函数 要 比 自己 编写 的 函数 快 很 多 。 


8.5.4 ”案例 一 一 合理 书写 if 语句 


在 编写 大 的 程序 时 几乎 都 要 用 到 if 语句 ， 但 是 有 时 需要 判断 的 情况 又 很 多 ， 这 就 需要 编 
写 多 个 else 语句 ， 而 在 程序 运行 时 又 需要 判断 多 次 才能 找到 符合 要 求 的 情况 ， 这 大 大 影响 了 
代码 的 执行 速度 。 所 以 ， 通 常 当 需要 判断 的 情况 超过 2 种 以 上 时 ， 最 后 使 用 switch 语句 ， 它 
的 case 分 句 允 许 任 何 类 型 的 数据 。 所 以 ， 这 种 情况 下 使 用 switch 语句 ， 无 论 是 在 代码 的 执行 
速度 方面 ， 还 是 在 代码 的 编写 方面 都 优 于 站 语句 。 

如 果 需 要 判断 的 情况 很 多 ， 仍 然 想 使 用 if 语句 ， 那 么 为 了 提高 代码 的 执行 速度 ， 在 写 站 
语句 和 else 语句 时 可 以 把 各 种 情况 按 其 可 能 性 从 高 到 低 排 列 ， 这 样 在 运行 时 就 可 以 相对 地 减 
少 判 断 的 次 数 。 


8.5.5 “案例 一 一 最 小 化 语句 数量 


最 小 化 语句 数量 的 一 个 最 典型 例子 就 是 当 在 一 个 页 面 中 需要 声明 多 个 变量 时 ， 就 可 以 使 
用 一 次 var 关键 字 来 定义 这 些 变量 。 例 如 以 下 代码 : 


Var name = "zhangsan" 
Var age = 22; 
var sex = " 男 "; 


Var myDate = new Date(); 


上 述 代码 使 用 了 4 次 var 关键 字 声明 了 4 个 变量 ,浪费 了 系统 资源 。 可 以 将 这 段 代码 用 
以 下 代码 替换 : 


Var name = "zhangsan", age = 22, sex = " 男 "， myDate = new Date() 


8.5.6 ”案例 一 一 节约 使 用 DOM 


在 JavaScript 中 使 用 DOM 可 以 对 节点 进行 动态 的 访问 和 修改 ， 当 我 们 要 使 用 JavaScript 
对 网 页 进行 操作 时 ， 几 乎 都 是 通过 DOM 来 完成 的 ， 所 以 DOM 对 JavaScript 非常 重要 。 但 
是 ， 使 用 DOM 来 操作 节点 会 改变 页 面 的 节点 ， 需 要 重新 加 载 整个 页 面 ， 所 以 会 花费 很 多 时 
间 。 例 如 在 使 用 DOM 动态 删除 单元 格 的 代码 中 有 以 下 一 段 代码 : 


for (Var i=l;i<objTable.tBodies[0] .rows.length+1;i++){ 
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Var objColumn=document .createElement ('td'); 
objcolumn . innerHTML="<a href='#'> 删 除 </a>"; 
objTable.tBodies[0] .children[i] .appendChild (objColumn); 
} 


在 上 述 代 码 中 ， 需 要 循环 调用 appendChild0 方 法 给 表格 每 一 行 追 加 一 列 ， 因 此 运行 时 循 
环 执行 几 次 ， 浏 览 器 就 需要 重新 加 载 页 面 几 次 。 所 以 应 当 尽量 节约 使 用 DOM， 并 可 以 考虑 使 
用 createDocumentFragment() 方 法 创建 一 个 文档 碎片 ， 然 后 把 所 有 新 的 节点 附加 在 该 文档 的 碎 
片上 ， 最 后 再 把 文档 碎片 的 内 容 一 次 性 添加 到 所 要 添加 的 节点 上 。 于 是 ， 上 述 代码 可 修改 为 
如 下 : 


Var objTable = document.getElementById("score") 7 

Var objFrgment = createDocumentFragment () 7 

for (var i=17i<objTable.tBodies [0] .rows.length+1;i++){ 
Var objcolumn=document .createElement ('td'); 

objcolumn .innerHTML="<a href="'#'> 删 除 </a>"; 

objFrament .appendChild(objColumn); 

} 

objTable.appendCchild (objFragment); 


8.6” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: 了解 常 见 的 错误 和 异常 。 
练习 2: 处 理 异常 的 方法 。 

练习 3: 使 用 调试 器 的 方法 。 

练习 4: JavaScript 语言 的 调试 技巧 。 


8.7 高 手 甜 点 


甜点 1: 常见 的 调试 问题 有 哪些 ? 


(1) 若 错误 定位 到 一 个 函数 的 调用 上 ， 说 明 函 数 体 有 问题 。 

(2) 若 出 现 对 象 为 null 或 找 不 到 对 象 ， 可 能 是 id、name 或 DOM 的 写法 出 现 问题 。 

(3) 多 增加 alert(xxx) 来 查看 变量 是 否 得 到 了 期 望 的 值 。 尽 管 这 样 比较 慢 ， 但 还 是 比较 有 
效果 的 。 

(4) /A**/ 注 释 屏 项 掉 运 行 正常 的 部 分 代码 ， 然 后 逐步 缩小 范围 检查 。 

(5) 正 浏 览 器 的 错误 报告 行 数 往往 不 准确 ， 出 现 此 情况 就 在 错误 行 前 后 的 几 行 找 错 。 

(6) 变量 大 小 写 、 中 英文 符号 的 影响 。 大 小 写 容易 找到 ， 但 是 有 些 编译 器 在 对 中 英文 标 
点 符号 的 显示 上 ， 不 易 区 分 ， 此 时 可 以 尝试 用 其 他 的 文本 编辑 工具 查看 。 
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甜点 2: 如 何 优化 JavaScript 代码 ? 


JavaScript 代码 的 优化 主要 是 优化 脚本 程序 代码 的 下 载 时 间 和 执行 效率 。 因 为 JavaScript 
运行 前 不 需要 进行 编译 而 直接 在 客户 端 运行 ， 所 以 代码 的 下 载 时 间 和 执行 效率 直接 决定 了 网 
页 的 打开 速度 ， 从 而 影响 着 客户 端的 用 户 体验 效果 。 

(1) 合理 地 声明 变量 。 

在 JavaScript 中 ， 变 量 的 声明 方式 分 为 显 式 声明 和 隐 式 声明 。 使 用 var 关键 字 进行 声明 的 
就 是 显 式 声明 ， 而 没有 使 用 var 关键 字 的 就 是 隐 式 声明 。 在 函数 中 显 式 声明 的 变量 为 局 部 变 
量 ， 隐 式 声明 的 变量 为 全 局 变量 。 

(2) 简化 代码 。 

简化 JavaScript 代码 是 优化 代码 的 一 个 非 要 重要 的 方法 。 将 工程 上 传 到 服务 器 前 ， 尽 量 缩 
短 代 码 的 长 度 ， 去 除 不 必要 的 字符 ， 包 括 注 释 、 不 必要 的 空格 、 换 行 等 。 

(3) 多 使 用 内 置 的 函数 库 。 

与 C、Java 等 语言 一 样 ，JavaScript 也 有 自己 的 函数 库 ， 函 数 库 里 有 很 多 内 置 函数 ， 用 户 
可 以 直接 调用 这 些 函数 。 当 然 ， 开 发 人 员 也 可 以 自己 去 编写 那些 函数 ， 但 是 JavaScript 中 的 内 
置 函数 的 属性 方法 都 是 经 过 C、C++ 之 类 的 语言 编译 的 ， 而 开发 者 自己 编写 的 函数 在 运行 前 还 
要 进行 编译 ， 所 以 在 运行 速度 上 JavaScript 的 内 置 函 数 要 比 自 己 编写 的 函数 快 很 多 。 
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处 理 文档 一 一 Document ( 文档 ) 对 和 象 
处 理 窗 口 一 一 Window 窗口 对 象 

有 问 就 有 答 一 一 事件 响应 

页 面 与 用 户 的 交互 一 一 表单 和 表单 元 素 
级 联 样式 表 一 一 CSS 

JavaScript 控制 样式 表 
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9.1 了 解 文档 对 象 


文档 对 象 模型 (DOM) 是 表示 文档 (例如 HTML 和 XML) 和 访问 、 操 作 构 成 文档 的 各 种 元 素 
的 应 用 程序 接口 (APD。 一 般 地 ， 支 持 JavaScript 的 所 有 浏览 器 都 支持 DOM。DOM 是 指 W3C 
定义 的 标准 的 文档 对 象 模型 ， 它 以 树 形 结构 表示 HIML 和 XML 文档 ， 定 义 了 遍历 这 个 树 和 
检查 、 修 改 树 的 节点 的 方法 和 属性 。 


9.1.1 什么 是 文档 对 象 模型 


DOM 是 W3C 组 织 推荐 的 处 理 HTML/XML 的 标准 接口 。DOM 实际 上 是 以 面向 对 象 的 方 
式 描述 的 对 象 模型 。 它 定义 了 表示 和 修改 文档 所 需要 的 对 象 ， 以 及 这 些 对 象 的 行为 和 属性 、 
对 象 之 间 的 关系 。 

所 有 编程 语言 可 以 按照 DOM 规范 去 实现 这 些 接口 ， 给 出 解析 文件 的 解析 器 。DOM 规范 
中 所 指 的 文件 相当 广泛 ， 其 中 包括 XML 文件 和 HTML 文件 。DOM 可 以 被 看 作 是 一 组 应 用 编 
程 接口 (Application Program Interface，APD。 它 把 HTML 文档 、XML 文档 等 看 作 一 个 文档 对 
象 ， 在 接口 里 面 存放 的 大 量 方法 ， 其 功能 是 对 这 些 文档 对 象 中 的 数据 进行 存 取 ， 并 且 利 用 程 
序 对 数据 进行 相应 处 理 。DOM 技术 并 不 是 首先 用 于 XML 文档 ， 对 于 HTML 文档 来 说 ， 很 早 
就 能 使 用 DOM 来 读 取 里 面 的 数据 了 。 

DOM 可 以 由 JavaScript 实现 ， 它 们 之 间 的 结合 非常 紧密 ， 甚 至 可 以 说 如 果 没 有 DOM， 
在 使 用 JavaScript 的 时 候 是 不 可 想象 的 ， 因 为 我 们 每 解析 一 个 节点 一 个 元 素 都 要 耗费 很 多 精 
力 ，DOM 设计 本 身 是 一 种 独立 的 程序 语言 ， 以 一 致 的 API 存 取 文 件 的 结构 表述 。 

在 使 用 DOM 进行 解析 HTML 对 象 的 时 候 ， 首 先 要 在 内 存 中 构建 起 一 棵 完整 的 解析 树 ， 
借 此 实现 对 整个 XML 文档 的 全 面 、 动 态 访 问 。 也 就 是 说 ， 它 的 解析 是 有 层次 的 ， 即 将 所 有 的 
HTML 中 的 元 素 都 解析 成 树 上 层次 分 明 的 节点 ， 然 后 对 这 些 节 点 执行 添加 、 删 除 、 修 改 及 查 
看 等 操作 。 

目前 W3C 提出 了 3 个 DOM 规范 ， 分 别 是 DOM Levell、DOM Level2、DOM Level3。 

(1) 从 DOM Level 1 开始 ，DOM 的 一 些 接 口 用 于 表示 可 从 XML 文档 中 找到 的 所 有 不 
同类 型 的 信息 。 它 还 包含 使 用 这 些 对 象 所 必需 的 方法 和 属性 。 

Levell 支持 的 对 象 包括 对 XML1.0 和 HTML。 每 个 HTML 元 素 被 表示 成 一 个 接口 ， 它 
包括 用 于 添加 、 编 辑 、 移 动 和 读 取 节 点 中 包含 的 信息 的 方法 等 。 然 而 ， 它 不 支持 XML 名 称 空 
间 CXML Namespace)，XML 名 称 空间 提供 分 割 文档 中 的 信息 的 能 力 。 

(2) DOM Level2 基于 DOM Levell 并 扩展 了 DOM Levell， 添 加 了 鼠标 和 用 户 界 面 事 
件 、 范 围 、 遍 历 (重复 执行 DOM 文档 的 方法 )、XML 命名 空间 、 文 本 范围 、 检 查 文档 层次 的 
方法 等 新 概念 ， 并 通过 对 象 接口 添加 了 对 CSS 的 支持 。 

同时 ，Dom Level2 引入 几 个 新 模块 ， 用 以 处 理 新 的 接口 类 型 ， 包 括 以 下 几 个 方面 。 

e DOM 视图 : 描述 跟踪 文档 的 各 种 视图 (使 用 CSS 样式 设计 文档 前 后 ) 的 接口 。 

e@ DOM 事件 : 描述 事件 的 接口 。 


@ DOM 样式 表 : 描述 处 理 基于 CSS 样式 的 接口 。 

e@ DOM 遍历 和 范围 描述 遍历 和 操作 文档 树 的 接口 。 

(3) 当前 正 处 于 定稿 阶段 的 DOM Level3 包括 对 创建 Document 对 象 (以 前 版 本 将 这 个 任 
务 留 给 实现 ， 使 得 创建 通用 应 用 程序 很 困难 ) 的 更 好 支持 、 增 强 了 名 称 空间 的 支持 ， 以 及 用 来 
处 理 文档 加 载 和 保存 、 验 证 、XPath 新 模块 ， XPath 是 在 XSL 转换 (XSL Transformation) 以 及 
其 他 XML 技术 中 用 来 选择 节点 的 手段 。 


9.1.2 ”文档 对 象 模型 的 功能 


文档 对 象 模型 定义 了 与 JavaScript 匹配 的 浏览 器 ， 描 述 了 文档 对 象 的 逻辑 结构 及 各 功能 部 
件 的 标准 接口 ， 主 要 包括 以 下 几 个 方面 。 

@ ”核心 JavaScript 语言 参考 (数据 类 型 、 运 算 符 、 基 本 语句 、 函 数 等 )。 

e@ “与 数据 类 型 相关 的 核心 对 象 (String、Array、Math、Date 等 数据 类 型 )。 

@ 浏览 器 对 象 (Window、Location、History、Navigator 等 )。 

@ ”文档 对 象 (Document、images、form 等 )。 

JavaScript 使 用 浏览 器 对 象 模型 (BOM) 和 文档 对 象 模型 (DOMD) 两 种 主要 对 象 模型 。 前 者 提 
供 了 访问 浏览 器 各 个 功能 部 件 ， 例 如 浏览 器 窗口 本 身 、 浏 览 历史 等 的 操作 方法 ， 后 者 则 提供 
了 访问 浏览 器 窗口 内 容 ， 例 如 文档 、 图 片 等 各 种 HTML 元 素 ， 以 及 这 些 元 素 包含 的 文本 的 操 
作 方 法 。 例 如 以 下 代码 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv=content-type content="text/html; charset=gb2312"> 
<title>DOM</title> 
</head> 
<body> 
<hl>rose</hl> 
<!--NOTE!--> 
<p>go to<em> DOM </em>World! </p> 
<ul> 
<li>go </1i> 
</ul> 
</body> 
</html> 


在 DOM 模型 中 ， 浏 览 器 载 入 这 个 HTML 文档 时 ， 以 树 的 形式 对 这 个 文档 进行 描述 。 其 
中 ， 各 HTML 的 标记 都 作为 一 个 对 象 进行 相关 操作 ， 如 图 9-1 所 示 。 从 中 可 以 看 出 ，html 是 
根 元 素 对 象 ， 可 代表 整个 文档 ; 而 head 和 body 是 两 个 分 支 ， 位 于 同一 层次 ， 为 兄弟 关系 ， 
存在 同一 父 元 素 对 象 ， 但 又 有 各 自 的 子 元 素 对 象 。 

DOM 不 同 版 本 的 存在 给 编写 客户 端 程序 的 程序 员 带 来 了 很 多 挑战 ， 编 写 当前 浏览 器 中 最 
新 对 象 模型 支持 的 JavaScript 脚本 相对 比较 容易 ， 但 如 果 使 用 早期 版 本 的 浏览 器 访问 这 些 网 
页 ， 将 会 出 现 不 支持 某 种 属性 或 方法 的 情况 。 因 此 ，W3C DOM 对 这 些 问 题 做 了 一 些 标准 化 的 
处 理 ， 新 的 文档 对 象 模型 继承 了 许多 原始 的 对 象 模型 ， 同 时 还 提供 了 文档 对 象 引用 的 新 方法 。 


鼎 薪 小 妆 萨 冷 一 一 识 膨 剖 邪 沙 妆 可 一 示 6 洪 目 
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图 9-1 HTML 文档 结构 树 
9.1.3 ”文档 对 象 的 产生 过 程 


在 面向 对 象 或 基于 对 象 的 编程 语言 中 ， 指 定 对 象 的 作用 域 越 小 ， 对 象 位 置 的 假定 也 就 越 
多 。 对 客户 端 JavaScript 脚本 而 言 ， 其 对 象 一 般 不 超过 浏览 器 ， 脚 本 不 会 访问 计算 机 硬件 、 操 
作 系统 、 其 他 程序 等 超出 浏览 器 的 对 象 。 

当 载 入 HTML 文档 时 ， 浏 览 器 解释 其 代码 ， 当 遇 到 自身 运行 的 HTML 元 素 对 象 对 应 的 标 
记 时 ， 浏 览 器 就 按 HTML 文档 载 入 的 顺序 在 内 存 中 创建 这 些 对 象 ， 而 不 管 JavaScript 脚本 是 
和 否 真 正 运行 这 些 对 象 。 对 象 创建 后 ， 浏 览 器 为 这 些 对 象 提供 专 供 JavaScript 脚本 使 用 的 可 选 属 
性 、 方 法 和 处 理 程序 。 通 过 这 些 属 性 、 方 法 和 处 理 程 序 ，Web 开发 人 员 就 能 动态 地 操作 
HTML 文档 的 内 容 。 

【 例 9.1】 (实例 文件 ，ch09\9.1.html) 动 态 改变 文档 背景 颜色 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<script language="javascript"> 
<}== 
function changeBgClr (value) 
{ 


document .body.style.backgroundColor=value 


和 
MV 
</script> 
</head> 
<body> 
<form> 
<input type=radio value=red onclick="changeBgClr (this .value) "> 红色 
<input type=radio value=green onclick="changeBgClr (this.value) "> 绿色 
<input type=radio value=blue onclick="changeBgClr (this.value)"> 蓝 色 
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</form> 
</body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 9-2 所 示 。 如 果 单 击 其 中 的 “红色 ” 单 选 按 
即 可 看 到 网 页 的 背景 颜色 变 为 绿色 ， 如 图 9-3 所 示 。 
其 中 ，document.body.style.backgroundColor 语句 表示 访问 当前 Document 对 象 中 的 子 对 象 


钮 


body 一 一 的 样式 子 对 象 style 的 backgroundColor 属性 。 


j 占 px 用户 目录 Documentschogv9lhtr B PD- O 
[@ ovR 户 上 了 Documentsv x| | 
文件 ( 虽 。 策 误 (E) 查看 (V) 收藏/A) 工具 (T) 才 助 (H) 


) 红 色 口 绿色 口 蓝 色 


图 9-2 显示 效果 


9.2 认识 DOM 的 节点 


在 DOM 中 ，HTML 文档 各 个 节点 


[el snl] 


=e 


司 DARBPR\Documents\choo\9 lhtn 二 DO| 0 wo EY 
优 px 用户 目 录 \Doc 
文件 (有 ” 妨 岛 (E) ”查看 (V) ”收藏 夫 (A) ”工具 (T) 。 帮助 (H) 


册 薪 淖 妆 获准 一 一 新 漂 前 蔚 油 妾 可 一 届 6 波 电 


时 100% ~ 


图 9-3 ”改变 网 页 背景 颜色 后 的 效果 
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被 视 为 各 种 类 型 的 Node 对 象 。 每 个 Node 对 象 都 有 自 


己 的 属性 和 方法 ， 利 用 这 些 属 性 和 方法 可 以 遍历 整个 文档 树 。 由 于 HTML 文档 的 复杂 性 ， 


DOM 用 nodeType 表示 节点 的 类 型 。 


节点 (node) 是 某 个 网 络 中 的 一 个 连接 点 ， 即 网 络 是 节点 和 连 线 的 集合 。 在 W3C DOM 
中 ， 每 个 容器 、 独 立 的 元 素 或 文本 块 都 可 以 被 看 作 是 一 个 节点 ， 节 点 是 W3C DOM 的 基本 构 
建 元 素 。 当 一 个 容器 包含 另 一 个 容器 时 ， 其 对 应 的 节点 存在 着 父子 关系 。 同 时 该 节点 树 遵循 
HTML 的 结构 化 本 质 ， 例 如 <html> 元 素 包 含 <head> 和 <body>， 而 <head> 又 包含 <title>， 


<body> 又 包含 各 种 块 元 素 等 。 


在 DOM 中 定义 了 HTML 文档 中 6 种 不 同 节点 的 类 型 ， 如 表 9-1 所 示 。 


表 9-1 DOM 定义 的 HTML 文档 节点 类 型 


节点 类 型 数值 节点 类 型 附加 说 明 实 _ 例 
1 元 素 (Element) HTML 标记 元 素 <hl>...</hl> 
2 属性 (Attribute) HTML 标记 元 素 的 属性 color="red" 
3 文本 (Text) 被 HTML 标记 括 起 来 的 | Hello World! 
文本 段 
8 注释 (Comment) HTML 注释 段 <!--Comment> 
9 文档 (Document) HTML 文档 跟 文 本 对 象 “| <html> 
10 文档 类 型 (DocumentType) | 文档 类 型 <IDOCTYPE HIML PUBLIC"..'> 
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| 在 IE6 内 核 浏览 器 中 属性 (attribute) 类 型 才 获 得 支持 。 所 有 支持 W3C DOM 的 
浏览 器 (IE5+、Mozl 和 Safari 等 ) 都 实现 了 前 3 种 常见 的 类 型 ， 其 中 Mozl 实现 了 
所 有 类 型 。 

DOM 节点 树 中 的 节点 有 元 素 节点 、 文 本 节点 和 属性 节点 三 种 不 同 的 类 型 ， 下 面 分 别 予 以 
介绍 。 


1. 元 素 节点 


在 HTML 文档 中 ， 各 HTML 元 素 (例如 <body>、<p>、<ul> 等 ) 构 成 了 文档 结构 模型 的 一 
个 元 素 对 象 。 在 节点 树 中 ， 每 个 元 素 对 象 又 构成 了 一 个 节点 。 元 素 可 以 包含 其 他 元 素 ， 所 有 
的 列表 项 元 素 <li> 都 包含 在 无 序 清单 元 素 <ul> 内 部 ，<html> 元 素 是 节点 树 的 根 节点 。 
例如 以 下 “商品 清单 ”代码 : 
<ul id="booklist"> 
<1i> 洗 衣 机 </1i> 
<1i> 冰 箱 </1i> 
<1i> 电 视 机 </1i> 


</ul> 
过 区 本 末世 


在 节点 树 中 ， 元 素 节点 构成 树 的 枝条 ， 而 文本 则 构成 树 的 叶子 。 如 果 一 份 文档 完全 由 空 
白 元 素 构成 ， 它 将 只 有 一 个 框架 ， 本 身 并 不 包含 什么 内 容 。 没 有 内 容 的 文档 是 没有 价值 的 ， 
而 绝 大 多 数 内 容 由 文本 提供 。 在 <p>go to<em> DOM </em>World! </p> 语 句 中 ， 包 含 go to、 
DOM、World3 个 文本 节点 。 

在 HIML 中 ， 文 本 节点 总 是 包含 在 元 素 节点 的 内 部 ， 但 并 非 所 有 的 元 素 节点 都 包含 或 直 
接 包 含 文本 节点 。 例 如 在 上 述 “ 商 品 清单 ”代码 中 ，<ul> 元 素 节点 并 不 包含 任何 文本 节点 ， 
而 是 包含 着 另外 的 元 素 节点 ， 元 素 节点 又 包含 着 文本 节点 。 所 以 说 ， 有 的 元 素 节点 只 是 间接 
包含 文本 节点 。 


3. 属性 节点 
HTML 文档 中 的 元 素 都 有 一 些 属性 ， 这 些 属性 可 以 准确 、 具 体 地 描述 相应 的 元 素 ， 进 而 
便于 进一步 的 操作 。 例 如 以 下 代码 : 


<hl class="Sample">go to DOM World!</hl> 
<ul 1d="bookliist"> </ul> 


这 里 class="Sample"、id="booklist" 都 属于 属性 节点 。 因 为 所 有 的 属性 都 是 放 在 元 素 标签 
里 ， 所 以 属性 节点 总 包含 在 元 素 节点 中 。 另 外 ， 并 非 所 有 的 元 素 都 包含 属性 ， 但 所 有 的 属性 
都 被 包含 在 元 素 里 。 


9.3 ”节点 的 基本 操作 


由 于 文本 节点 具有 易于 操纵 、 对 象 明 确 等 特点 ，DOM Levell 提供 了 非常 丰富 的 节点 操作 
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二 


方法 ， 如 表 9.2 所 示 。 3 
表 9-2 DOM 中 的 节点 处 理 方法 到 
操作 类 型 方法 原型 说 明 到 
creatElement(tagName) 创建 由 tagName 指定 类 型 的 标记 天 
生成 节点 CreateTextNode(string) 创建 包含 字符 创 string 的 文本 节点 其 
createAttribute(name) 针对 节点 创建 由 name 指定 的 属性 ， 不 常用 1 
createComment(string) 创建 由 字符 串 string 指定 的 文本 注释 交 
插入 的 添加 | appendChild(newChild.targetChild 添加 子 节点 newChild 到 目标 节点 上 与 
节点 insertBefore(newChild,targetChild) 将 新 节点 newChild 插入 到 目标 节点 targetChild 象 
之 前 
复制 节点 cloneNode(bool) 复制 节点 自身 ， 由 逻辑 量 bool 确定 是 否 复制 NN 
子 节点 NN 
删除 和 替换 | removeChild(childName 删除 由 childName 指定 的 节点 SS 
节点 TeplaceChild(newChild.oldChild 用 新 节点 newChild 蔡 换 旧 节点 oldChild RS 


9.3.1 案例 一 一 创建 节点 


DOM 支持 创建 节点 的 方法 ， 这 些 方法 作为 Document 对 象 的 一 部 分 被 使 用 。 其 提供 的 生 
成 新 节点 的 方法 非常 简单 ， 语 法 分 别 如 下 : 


MyElement=document .createElement ("hl1") 
MyTextNode=document .createTextNode ("My Text") 


Text 的 文本 节点 。 
【 例 9.2】 (实例 文件 : ch09\9.2.htmD) 创 建新 节点 并 验证 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv=content-type content="text/html; charset=gb2312"> 
<title> 创 建 并 验证 节点 </title> 
</head> 
<script language="JavaScript" type="text/javascript"> 
| 
function nodeStatus (node) 
| 
Var temp=""; 
if (node.nodeName!=null) 
{ 
temp+="nodeName: "+node.nodeNamet+"\n"; 
} 
else temp+="nodeName: null!l\n"; 
if (node.nodeType!=null) 
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temp+="nodeType: "+node.nodeTypet+"\n"; 
} 
else temp+="nodeType: null\n™; 
if (node.nodeValue!=null) 
{ 
temp+="nodeValue: "+node.nodeValuet"\n\n"; 
} 
else temp+="nodeValue: null\n\n™; 
return temp; 
function MyTest( ) 
" 
// 产 生 p 元 素 节点 和 新 文本 节点 
var newParagraph = document .createElement ("p") 7 
Var newTextNode= document .createTextNode (document .MyForm.MyField.value); 
Var msg=nodeStatus (newParagraph) 7 
msg+=nodeStatus (newTextNode) 
alert (msg) 7 
return; 
于 
1 
</script> 
SS <body> 
<form name="MyForm"> 
<input type="text" name="MyField" value="Text"> 
<input type="button" value=" 测 试 " onclick="MyTest ()"> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 9-4 所 示 。 单 击 【 测 试 】 按 钮 ， 即 可 触发 
MyTest0 函 数 。 在 弹出 的 信息 框 中 可 以 看 出 创建 节点 的 信息 ， 如 图 9-5 所 示 。 


nodeName: Pp 
nodeType: 1 
@e 外 ee ren PE nodeValue: null 
创建 并 验 还 节操 x 
文件 (久久 和 查看 V】 ”收藏 夫 (A) 工具 [者 动 (H) nodeName: #text 
Text 测试 nodeType: 3 
nodeValue: Text 
二 100% ~ 
图 9-4 显示 结果 图 9-5 显示 创建 节点 的 信息 


9.3.2 ”案例 一 一 插入 和 添加 节点 
将 新 创建 的 节点 插入 到 文档 的 节点 树 中 ， 最 简单 的 方法 就 是 让 它 成 为 该 文档 某 个 现 有 节 


区 加 


点 的 子 节点 。 使 用 appendChild(newChild) 可 以 为 现 有 的 节点 添加 子 节点 ， 在 该 节点 的 子 节点 
列表 的 结尾 添加 一 个 newChild。 其 语法 格式 为 : object.appendChild(newChild)。 
使 用 appendChild0 方 法 将 下 面 两 个 节点 连接 起 来 : 


newNode=document .createElement ("b"); 
newText=document .createTextNode ("welcome to beijing"); 
newNode.appendChild (newText); 


经 过 appendChild0 方 法 结合 后 ， 将 得 到 以 下 语句 : 
<b> welcome to beijing </b> 


将 其 插入 到 文档 中 的 适当 位 置 ， 例 如 插入 到 某 个 段落 的 结尾 : 


current=document .getElementById ("pl1") 


【 例 9.3】 (实例 文件 ，ch09\9.3.htmD) 在 节点 树 中 插入 节点 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv=content-type content="text/html; charset=gb2312"> 
<title>Sample Page!</title> 
</head> 
<script language="JavaScript" type="text/javascript"> 
SEE 
function nodeStatus (node) 
{ 
Var temp=""; 
if(node.nodeName!=nul1) 
{ 
temp+="nodeName: "+node.nodeName+"\n"; 
} 
else temp+="nodeName: null!\n"; 
if (node.nodeType!=null) 
{ 
temp+="nodeType: "+node.nodeType+"\n"; 
. 
else temp+="nodeType: null\n"; 
if(node.nodeValue!=null) 
{ 
temp+="nodeValue: "+node.nodeValuet+"\n\n"; 
} 
else temp+="nodeValue: null\n\n™; 
return temp; 


位 蘑 册 兰 详 装 一 一 皇 盯 前 芍 邓 尝 可 可 届 6 小 鲁 
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function MyTest( ) 


// 产 生 p 元 素 节点 和 新 文本 节点 ， 并 将 文本 节点 添加 为 p 元 素 节点 的 最 后 一 个 子 节点 

Var newParagraph = document .createElement ("p"); 

Var newTextNode= document .createTextNode (document .MyForm.MyField.value); 
newParagraph.appendCchild (newTextNode) 7 

var msg=nodeStatus (newParagraph); 

msg+=nodeStatus (newTextNode); 

msg+=nodeStatus (newParagraph.firstCchild); 
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alert (msg) 7 
return; 
} 
N==> 
</script> 
<body> 
<form name="MyForm"> 
<input type="text" name="MyField" value="Text"> 
<input type="button" value=" 测 试 " onclick="MyTest () "> 
</body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 运行 后 ， 在 打开 的 页 面 中 单 击 【测试 】 按 钮 ， 即 可 触发 
MyTest0 函 数 并 弹出 信息 框 ， 如 图 9-6 所 示 。 从 中 可 以 看 出 使 用 newParagraph.appendChild 
(newTextNode) 语 句 后 ， 节 点 newTextNode 和 节点 newparagraph.firstChild 表示 的 是 同一 节点 。 
这 表明 生成 的 文本 节点 已 经 添加 到 了 <p> 元 素 节点 的 子 节点 列表 中 。 


nodeName: P 
企 nodeType: 1 

nodeValue: null 

nodeName: stext 


nodeType: 3 
nodeValue: Text 


nodeName: #text 


nodeType: 3 
nodeValue: Text 


图 9-6 生成 的 信息 框 


使 用 insertBefore(newChild,targetChild) 方 法 可 将 文档 中 新 节点 newChlid 插入 到 原始 节点 
targetChild 的 前 面 。 其 语法 格式 为 : parentElement.insertBefore(newChild,targetChild)。 

调用 此 方法 之 前 ， 要 注意 : 要 插入 的 新 节点 newChild 和 目标 节点 targetChild 的 父 节点 
parentElement。 其 中 ，parentElement=targetChild.parentNode， 且 父 节 点 必须 是 元 素 节点 。 下 面 
以 “<p id="p1">go to<B> DOM </B>World! </p>” 语 句 为 例 ， 演 示 如 何在 文本 节点 “go to” 
之 前 添加 一 个 同 父 文本 节点 Please。 

【 例 9.4】 (实例 文件 ，ch09\9.4.htmD) 在 节点 树 中 插入 节点 。 代 码 如 下 : 


<!IDOCTYPE HTML > 

<html> 

<head> 

<meta http-equiv=content-type content="text/html; charset=gb2312"> 
<title> 添 加 同 父 节 点 </title> 

</head> 

<body> 

<p id="pl">go to<B> DOM </B>World! </p> 

<script language="JavaSscript" type="text/javascript"> 


全? 


证 


= 
function nodestatus (node) 
:| 
Var temp=""; 
if (node.nodeName!=null) 
{ 
temp+="nodeName: "+node.nodeName+"\n"; 
} 
else temp+="nodeNamt null!l\n"; 
if(node.nodeType!=null) 
下 


temp+="nodeType: "+node .nodeType+"\n"7 
} 
else temp+="nodeType: null\n"; 
if(node.nodeValue!=null) 


. 
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temp+="nodeValue: "+node.nodeValuet+"\n\n"; 
} 
else temp+="nodeValue: null\n\n"; 
return temp; 


GG 


} 

// 输 出 节点 树 相关 信息 

// 返 回 id 属性 值 为 pl 的 元 素 节点 

Var parentElement=document .getElementById('p1'); 
var msg="insertBefore 方法 之 前 : \n" 

msg+=nodeStatus (parentElement); 

// 返 回 pl 的 第 一 个 孩子 ， 即 文本 节点 Welcome to 

Var targetElement=parentElement.firstChild; 
msg+=nodeStatus (targetElement); 

// 返 回 文本 节点 welcome to 的 下 一 个 同 父 节点 ， 即 元 素 节 点 B 
Var currentElement=targetElement .nextSibling; 
msg+=nodeStatus (currentElement); 

// 返 回 元 素 节 点 的 最 后 一 个 孩子 ， 即 文本 节点 World! 
currentElement=parentElement.lastcChild; 
msg+=nodeStatus (currentElement); 

// 生 成 新 文本 节点 Please， 并 插入 到 文本 节点 go to 之 前 
Var newTextNode= document .createTextNode ("Please"); 
parentElement .insertBefore (newTextNode, targetElement); 
msg+="insertBefore 方法 之 后 :\n"+nodestatus (parentElement); 
// 返 回 pl 的 第 一 个 孩子 ， 即 文本 节点 Please 
targetElement=parentElement.firstChild; 
msg+=nodeStatus (targetElement); 

// 返 回 文本 节点 go to 的 下 一 个 同 父 节点 ， 即 元 素 节点 go to 
Var currentElement=targetElement .nextSibling; 
msg+=nodeStatus (currentElement); 

// 返 回 元 素 节点 P， 即 文本 节点 World! 
currentElement=parentElement.lastChild; 
msg+=nodeStatus (currentElement); 

// 输 出 节点 属性 

alert (msg); 

R= 

</script> 

</body> 

</html> 
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从 上 述 代 码 可 以 很 直观 地 看 出 文本 节点 “go to” 在 作为 insertBefore( ) 方 法 的 目标 节点 
后 ， 在 其 前 面 插入 文本 节点 Please 作为 <p> 元 素 节点 的 第 一 子 节点 。 输 出 信息 按照 父 节点 、 第 
一 个 子 节点 、 下 一 个 子 节点 、 最 后 一 个 子 节点 的 顺序 显示 。 在 正 9.0 浏览 器 中 运行 上 述 代 
码 ， 弹 出 的 信息 提示 框 如 图 9-7 所 示 。 单 击 【确定 】 按 钮 ， 即 可 看 到 添加 完成 后 的 字符 串 ， 
如 图 9-8 所 示 。 


全 merefore 方 法 之 部 : 
nodeName: Pp 


modevalue nul 


名 Da 用 户 日 录 \Documentsvch09\94html 二 刀 - 避 
EE x 


文件 由 归 久 站 时 看 V) 收 荐 夫 (A) 工具 0) 帮助 (H) 


Pleasego to DOM Vorld: 


nodeType: 3 
nodeValue: World! 


图 9-7 消息 提示 对 话 框 图 9-8 添加 完成 后 的 字符 串 


DOM 本 身 并 没有 提供 insertBefore0 和 insertAfter() 方 法 ， 如 果 想 在 指定 节点 之 前 或 之 后 插 
入 新 节点 ， 但 可 通过 如 下 方式 实现 : 


function insertAfter (newChild,targetChild) 
{ 
Var parentElement=targetCchild.parentNode; 
// 检 查 目标 节点 是 否 是 父 节点 的 最 后 一 个 子 节点 
// 是 : 直接 按 appendchild () 方法 插入 新 节点 
If (parentE1lement .lastCchild==targetChild) 


{ 
ParentElement .appendChild (newChild) > 


} 
// 不 是 : 使 用 目标 节点 的 nextsibling 属性 定位 到 它 的 下 一 同 父 节 点 ， 按 insertBefore () 方法 操作 
else 


parentElement .insertBefore (newChild,targetElement .nextSibling); 


了 
9.3.3 ”案例 一 一 复制 节点 
有 时 候 并 不 需要 生成 或 插入 新 的 节点 ， 而 只 需要 复制 一 下 节点 就 可 以 达到 既定 的 目标 。 


在 JavaScript 中 ， 可 使 用 DOM 提供 的 cloneNode0 方 法 来 复制 特定 的 节点 。 其 语法 格式 为 
clonedNode=tragetNode.cloneNode(bool). 

其 中 参数 bool 为 逻辑 量 ， 取 值 情 况 如 下 。 

@ ”bool=1 或 true: 表示 复制 节点 自身 的 同时 复制 该 节点 所 有 的 子 节点 。 

@ bool-0 或 false: 表示 仅仅 复制 节点 自身 。 

【 例 9.5】 (实例 文件 ，ch09\9.5.htmD) 复 制 节点 并 将 其 插入 到 节点 树 中 。 代 码 如 下 : 


<!DOCTYPE html > 
<html> 
<head> 
<title> 复 制 节点 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" > 
</head> 
<body> 
<p id="pl">Please <em>go to</em> DOM World</p> 
<hr> 
<div id="inserthere" style="background-color: blue;"></div> 
<hr> 
<script type="text/javascript"> 
ba 
function cloneAndCopy (nodeId，deep) // 复 制 函数 
{ 
Var toClone = document .getElementById (nodeId); // 复 制 
var clonedNode = toClone.cloneNode (deep); // 深 度 复制 
Var insertPoint = document .getElementById('inserthere'); 
insertPoint.appendChild(clonedNode); // 添 加 结 点 
} 
A 
</script> 
<form action="#" method="get"> 
<form action="#" method="get"> 
<! 一 通过 设置 cloneAndcopy () 第 二 个 参数 为 true 或 false 来 控制 复制 的 结果 --> 
<input type="button" value=" 复 制 "onclick="cloneAndCopy ('pl',false);"> 
&nbsp; Enbsp; 
<input type="button" value=" 深 度 复制 "onclick="cloneAndCopy ("plytruel™ > 
</form> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 9-9 所 示 。 单 击 【 复 制 】 按 钮 即 可 看 到 程序 
仅 复 制 了 指定 的 节点 ， 如 图 9-10 所 示 。 
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ED 深度 页 制 


硬汉 ”区 要 


图 9-9 显示 结果 图 9-10 只 复制 节点 
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若 单 击 【深度 复制 】 按 钮 在 复制 节点 自身 的 同时 ， 还 可 以 复制 该 节点 所 有 的 子 节点 ， 显 
示 结果 如 图 9-11 所 示 。 


(Dowememeocms hm o-oo 
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图 9-11 深度 复制 节点 结果 


9.3.4 ”案例 一 一 删除 节点 和 替换 节点 
使 用 DOM 提供 removeChild0 方 法 可 以 删除 节点 树 中 特定 的 节点 。 其 语法 格式 为 


removeNode=object.removeChild(name)。 
其 中 ， 参 数 name 指明 了 要 删除 的 节点 名 称 ， 该 方法 返回 所 删除 的 节点 对 象 。 
使 用 replaceChild() 方 法 可 以 替换 DOM 中 指定 的 节点 。 其 语法 格式 为 object.replaceChild 
(newChild, oldChild)。 其 中 两 个 参数 的 含义 如 下 。 
@ newChild: 新 添加 的 节点 。 
@ ”oldChild: 被 蔡 换 的 目标 节点 。 在 替换 后 ， 旧 节点 的 内 容 将 被 删除 。 
【 例 9.6】 (实例 文件 : ch09\9.6.html) 删 除 和 蔡 换 节点 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 删 除 和 蔡 换 节点 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" > 
<script type="text/javascript"> 
<!-- 
function doDelete() // 删 除 函数 
{ 
var deletePoint = document .getElementById('toDelete'); // 标 记 要 删除 的 结 点 
if (deletePoint.haschildNodes()) // 如 果 含有 子 结 点 
deletePoint .removechild(deletePoint.lastchild); // 移 除 其 最 后 子 结 点 
} 
function doReplace() // 替 换 函 数 
{ 
var replace = document .getElementById('toReplace'); // 标 记 要 替换 的 结 点 
if (replace) // 如 果 目 标 存在 


// 创 建新 结 点 的 元 素 属性 

Var newNode = document.createElement ("strong"); 

Var newText = document.createTextNode ("strong element"); 
// 执 行 追加 操作 

newNode .appendChild (newText); 

// 执 行 蔡 换 操 作 

replace.parentNode.replaceChild (newNode, replace); 


} 


} 
人 
</script> 
</head> 
<body> 
<div id="toDelete" align="center"> 
<p>This is a node</p> 
<p>This is <em>another node</em> to delete</p> 
<p>This is yet another node</p> 
</div> 
<p align="center"> 
This node has an <em id="toReplace">em element</em> in it. 
</p> 
< > 
<form action="#" method="get" > 
<! 一 通过 onclick 事件 ， 调 用 相应 的 删除 与 葵 换 函数 ， 完 成 任务 --> 
<input type="button™" value=" 删 除 " onclick="doDelete();"> 
<input type="button"” value=" 蔡 换 ” onclick="doReplace();"> 
</form> 
</body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 9-12 所 示 。 若 单 击 【 蔡 换 】 按 钮 ， 即 可 蔡 换 
相应 的 节点 ， 蔡 换 结果 如 图 9-13 所 示 。 
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This is ae node This is a node 


This is anorher node to delere This is another node to delere 


This is yet anorher node This is yer another node 


This node has an em elenent in it. This node has an strong element in it. 
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图 9-12 显示 结果 图 9-13 替换 结果 
若 单 击 【删除 】 按 钮 ， 即 可 删除 指定 的 节点 ， 删 除 结果 如 图 9-14 所 示 。 


EEC 


This is another node to delete 


This node has an strong element in it. 


图 9-14 ”删除 结果 
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5 由 于 Opera 浏览 器 与 Mozilla 系列 的 浏览 器 中 的 DOM 树 包含 空白 字符 ， 所 
SS 以， 上 述 程序 在 这 些 浏览 器 中 显示 要 删除 一 个 节点 时 ， 要 比 在 IE 浏览 器 中 单 击 
【删除 】 按 钮 的 次 数 多 。 


另外 ， 通 过 createTextNode() 方 法 产生 的 文本 节点 并 不 具有 任何 内 在 样式 。 如 果 要 改变 文 
本 节点 的 外 观 及 文本 ， 就 必须 修改 该 文本 节点 父 节点 的 style 属性 。 执 行 样式 更 改 和 内 容 变化 
的 浏览 器 将 自动 刷新 此 网 页 ， 以 适应 文本 节点 样式 和 内 容 的 变化 。 


9.3.5 “案例 一 一 修改 节点 


虽然 元 素 属性 可 以 修改 ， 但 元 素 不 能 被 直接 修改 。 如 果 要 修改 元 素 ， 需 要 修改 节点 本 
身 。 例 如 对 于 <p id="p1">This is a node</p> 节 点 的 修改 ， 可 以 使 用 textNode=document getElementById 
("PpP1"). firstchild 代码 对 段落 元 素 内 部 的 文本 节点 进行 访问 ， 或 使 用 length 属性 设置 TextNode 
的 长 度 ， 或 使 用 Data 对 其 值 进行 设置 等 方法 来 修改 。 如 表 9-3 所 示 为 处 理 文本 节点 的 常用 方 


法 及 其 作用 。 
表 9-3 处 理 文本 节点 的 方法 
方 法 作 用 

appendData(string 在 文本 节点 的 结尾 添加 一 个 由 string 指定 的 字符 串 

deleteData(offset.count 删除 从 offset 处 开始 由 count 指定 的 字符 串 个 数 

insertData(offsetstring 在 offset 处 插入 string 指定 的 文本 

TeplaceData(offseLoffsetstring 用 string 指定 的 文本 替换 从 offset 开始 的 由 count 指定 数目 的 字符 

splitText(offset) 从 offset 处 将 原文 本 节点 一 分 为 二 ， 其 中 左 半 部 分 作为 原 节点 内 
容 ， 右 半 部 分 作为 新 的 文本 节点 

substringData(offsetcount) 返回 一 个 字符 串 ， 该 字符 串 包含 从 offset 开始 的 由 count 指定 的 数 
目的 一 组 字符 


【 例 9.7】 (实例 文件 ，ch09\9.7.html) 多 种 方法 修改 节点 。 代 码 如 下 : 


<!DOCTYPE html > 
<html> 
<head> 
<title> 修 改 节点 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" > 
</head> 
<body> 
<p id="pl">welcome to beijing</p> 
<script type="text/javascript"> 
+ 
// 调 用 并 存储 pl 结 点 的 第 一 个 子 结 点 的 相关 属性 
Var textNode = document .getElementById('pl1') .firstChild; 
WE 六 
</script> 
<form action="#" method="get"> 


<! 一 通过 调用 onclick 事件 ， 对 结 点 进行 修改 、 追 加 、 插 入 、 删 除 、 蔡 换 等 操作 -> 


全?218 


<input type="button"” value=" 显 示 " onclick="alert (textNode.data);" > 

<input type="button"” value=" 长 度 " onclick="alert (textNode.length);" > 

<input type="button™ value=" 改 变 " onclick="textNode.data = 'nice to meet 
you!l'"><p> 

<input type="button™ value=" 追 加 ” onclick="textNode -appendData(" 
tooe")7”> 

<input type="button"” value=" 插 入 " 
onclick="textNode.insertData(0,'very');" > 

<input type="button™ value=" 删 除 " onclick="textNode .deleteData(0， 
SH > 

<input type="button"” value=" 蔡 换 " 
onclick="textNode.replaceData(0,4,'tel!');" > 

<! 一 调用 substringData () 来 读 取 子 串 --> 

<input type="button"” value=" 子 串 " 
onclick="alert (textNode.substringData(2,2));" > 

<! 一 调用 splitText () 来 完成 拆 分 操作 --> 

<input type="button"” value=" 拆 分 " onclick="temp = textNode.splitText (5); 
alert ('Text node ='+textNode.data+'\nSplit Value = '+temp.data);" > 

</form> 
</body> 

</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 结果 如 图 9-15 所 示 。 单 击 各 按钮 ， 即 可 实现 不 同 的 结 
果 。 例 如 单 击 【长 度 】 按 钮 即 可 显示 相应 的 信息 ， 如 图 9-16 所 示 。 
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图 9-15 显示 结果 图 9-16 节点 信息 显示 结果 


9.4 ”实战 演练 一 一 在 DOM 模型 中 获得 对 象 


在 DOM 结构 中 ， 其 根 结 点 由 documen 对 象 表示 ， 对 于 HTML 文档 而 言 ， 实 际 上 就 是 
<html> 元 素 。 当 使 用 JavaScript 脚本 语言 操作 HTML 文档 的 时 ，document 对 象 表示 整个 
HIML 页 面 。 在 使 用 DOM 操作 XML 和 HTML 文档 时 ， 经 常 要 使 用 document 对 象 。 
Document 对 象 是 一 棵 文档 树 的 根 ， 该 对 象 可 为 我 们 提供 对 文档 数据 的 最 初 (或 最 顶层) 的 访问 
并 加 

【 例 9.8】 (实例 文件 : ch09\9.8.htmD 在 DOM 模型 中 获得 对 象 。 代 码 如 下 : 


<!DOCTYPE html> 
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<html> 
<head> 
<title> 解 析 HTML 对 象 </title> 
<script type="text/javascript"> 
window.onload = function(){ 
var zhwHtml = document.documentElement; // 通 过 docuemnt.documentElement 获 
取 根 节点 ==>html 
alert (zhwHtml .nodeName); // 打 印 节 点 名 称 HTML 大 写 
var zhwBody = document .body; // 获 取 body 标签 节点 
alert (zhwBody .nodeName); // 打 印 BODY 节点 的 名 称 
var fH = zhwBody.firstchild; // 获 取 body 的 第 一 个 子 节点 
alert (fH+"body 的 第 一 个 子 节点 "); 
var 1H = zhwBody.lastchild; // 获 取 body 的 最 后 一 个 子 节点 
alert (1H+"body 的 最 后 一 个 子 节点 ") ; 
var ht = document .getElementById("zhw"); // 通 过 id 获取 <h1> 
alert (ht.nodeName) 7 
Var text = ht.childNodes; 
alert (text .length); 
Var txt = ht.firstchild; 
alert (txt.nodeName); 
alert (txt.nodeValue); 
alert (ht.innerHTML); 
alert (ht.innerText+"Text"); 
} 
</script> 
</head> 
<body> 
<hl id="zhw"> 我 是 一 个 内 容 节点 </h1> 
</body> 
</html> 


在 上 述 代 码 中 ， 首 先 使 用 document.documentElemen 语句 获取 了 HTML 文件 的 根 节点 ， 
之 后 分 别 获取 了 body 节点 、body 的 第 一 个 节点 、 最 后 一 个 子 节点 。 语 句 document.getElementById 
("zhw") 表 示 获 得 的 指定 节点 ， 并 输出 了 节点 名 称 和 节点 内 容 。 

上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 9-17 所 示 ， 当 页 面 显 示 的 时 候 ，JavaScript 程 
序 会 依次 将 HTML 的 相关 节点 输出 ， 例 如 输出 HTML、Body 和 HI 等 节点 。 
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9-17 ”显示 结果 


9.5 ” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: JavaScript 文档 对 象 的 使 用 。 
练习 2: JavaScript 节点 的 使 用 。 
练习 3: JavaScript 节点 的 基本 操作 。 


9.6 高 手 甜 点 


甜点 1: 目前 主流 的 浏览 器 是 否 支持 DOM 事件 处 理 模型 ? 


目前 除了 正 浏览 器 外 ， 其 他 主流 的 Firefox、Opera、Safari 都 支持 标准 DOM 事件 处 理 模 
型 。 正 浏览 器 仍然 用 自己 的 模型 ， 即 冒 泡 型， 该 模型 的 一 部 分 被 DOM 采用 。 

甜点 2: Element 对 象 和 NodeList 对 象 的 作用 是 什么 ? 

在 DOM 中 ，Element 对 象 表 示 HIML 元 素 。Element 对 象 可 以 拥有 的 类 型 分 为 元 素 节 
点 、 文 本 节点 和 注释 节点 的 子 节点 。NodeList 对 象 表示 节点 列表 ， 比 如 HIML 元 素 的 子 节点 
集合 。 

目前 IE、Firefox、Safari、Chrome 和 Opera 等 浏览 器 均 支 持 Element 对 象 和 NodeList 
对 象 。 
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对 象 的 子 对 象 ， 且 直接 可 以 在 JavaScript 中 4 
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10.1 文档 对 象 概述 


document 对 象 被 称 为 文档 对 象 ， 它 是 Window 对 象 的 子 对 象 ， 代 表 浏 览 器 窗口 中 的 文 
档 。 由 于 Window 对 象 是 DOM 对 象 模型 中 的 默认 对 象 ， 因 此 Window 对 象 中 的 方法 和 子 对 象 
不 需要 使 用 Window 来 引用 。 

另外 ， 通 过 document 对 象 可 以 访问 HTML 文档 中 包含 的 任何 HTML 标记 ， 并 能 动态 地 
改变 HTML 标记 中 的 内 容 ， 例 如 表单 、 图 像 、 表 格 和 超 链接 等 。 该 对 象 在 JavaScript 1.0 版 本 
中 就 已 存在 ， 在 随后 的 版 本 中 又 增加 了 多 个 属性 和 方法 。 有 关 document 对 象 的 属性 和 方法 将 
在 后 面 的 小 节 中 进行 详细 介绍 。 


10.2 文档 对 象 的 属性 和 方法 


document 对 象 提供 的 属性 和 方法 主要 用 在 设置 浏览 器 当前 载 入 文档 的 相关 信息 、 管 理 页 
面 中 已 存在 的 标记 元 素 对 象 、 向 目标 文档 中 添加 新 文本 内 容 、 产 生 并 操作 新 的 元 素 等 方面 。 


10.2.1 文档 对 象 的 属性 


window 对 象 具有 document 属性 ， 该 属性 表示 在 窗口 中 显示 HTML 文件 的 document 对 
象 。 客 户 端 JavaScript 可 以 把 静态 的 HTML 文档 转换 成 交互 式 的 程序 ， 因 为 document 对 象 提 
供 交互 访问 静态 文档 内 容 的 功能 。 除 了 提供 文档 整体 信息 的 属性 外 ，document 对 象 还 有 很 多 
的 重要 属性 ， 这 些 属性 提供 文档 内 容 的 信息 。 如 表 10-1 所 示 为 document 对 象 常用 属性 与 说 
明 信 息 。 


表 10-1 document 对 象 常用 属性 及 说 明 


属性 名 称 说 明 
alinkColor 这 些 属性 描述 了 超 链接 的 颜色 。linkColor 指 未 访问 过 的 链接 的 正常 颜色 ;vlinkColor 
linkColor 指 访问 过 的 链接 的 颜色 ;alinkColor 指 被 激活 的 链接 的 颜色 。 这 些 属性 对 应 于 HTML 
vlinkColor 文档 中 body 标记 的 属性 : alink、link 和 vlink 
anchors[] Anchor 对 象 的 一 个 数组 ， 该 对 象 保存 着 代表 文档 中 锚 的 集合 
applets[] Applet 对 象 的 一 个 数组 ， 该 对 象 代表 文档 中 的 Java 小 程序 
bgColor 文档 的 背景 色 和 前 景色 ， 这 两 个 属性 对 应 于 HTML 文档 中 body 标记 的 bgcolor 和 
feColor text 属性 
cookie 一 个 特殊 属性 ， 允 许 JavaScript 脚本 读 写 HTTP cookie 
domain 该 属性 使 处 于 同一 域 中 的 相互 信任 的 Web 服务 器 在 网 页 间 交 互 时 能 协同 忽略 某 项 案 
例 性 限制 
forms[] Form 对 象 的 一 个 数组 ， 该 对 象 代表 文档 中 form 标记 的 集合 
images[] Image 对 象 一 个 数组 ， 该 对 象 代表 文档 中 <img> 标 记 集合 。 
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续 表 E 

属性 名 称 说 明 “| 
lastModified 一 个 字符 串 ， 包 含 文档 的 最 后 修改 日 期 外 
links[] Link 对 象 的 一 个 数组 ， 该 对 象 代 表 文 档 的 链接 <a> 标 记 的 集合 癌 
location 等 价 于 属性 URL 对 
Teferrer 文档 的 URL， 包 含 把 浏览 器 带 到 当前 文档 的 链接 | 
title 当前 文档 的 标题 ， 即 <tile> 和 </tile> 之 间 的 文本 9 
URL 一 个 字符 串 。 声 明 装 载 文件 的 URL， 除 非 发 生 了 服务 器 重 定向 ， 否 则 该 属性 的 值 与 
Window 对 象 的 Location .href 相同 3 

对 

象 


10.2.2 ”文档 对 象 的 方法 


document 对 象 的 常用 方法 有 清除 指定 内 容 的 clear 方法 、 关 闭 文档 的 close 方法 、 打 开 文 
档 open 方法 、 把 文本 写 入 文档 的 write 方法 、 把 文本 写 入 文档 并 换行 的 writeln 方法 。 如 


表 10-2 所 示 为 document 对 象 的 方法 。 
表 10-2 ” document 对 象 方法 


IGG 


方法 名 称 说 明 
closel 关闭 或 结束 open0 方 法 打开 的 文档 
open 产生 一 个 新 文档 ， 并 清除 已 有 文档 的 内 容 
write 输入 文本 到 当前 打开 的 文档 
Writelnl 输入 文本 到 当前 打开 的 文档 ， 并 添加 一 个 换行 符 
documentcreateElement(Tag 创建 一 个 html 标签 对 象 
document.getElementById(ID. 获得 指定 ID 值 的 对 象 
document.getElementsByName(Name 获得 指定 Name 值 的 对 象 


10.3 ”文档 对 象 的 应 用 


Document 对 象 包括 当前 浏览 器 窗口 或 框架 区 域 中 的 所 有 内 容 ， 包 含 文本 域 、 按 钮 、 单 选 
框 、 图 片 、 链 接 等 HTML 页 面 可 访问 的 元 素 ， 但 不 包含 浏览 器 的 菜单 栏 、 工 具 栏 和 状态 栏 。 
Document 对 象 提供 了 一 系列 属性 和 方法 ， 可 以 对 页 面 元 素 进行 各 种 属性 设置 。 


10.3.1 案例 一 一 设置 页 面 显示 颜色 


通过 Document 对 象 提供 的 alinkColor、fgColor、bgColor 等 颜色 属性 ， 可 以 设置 Web 页 


面 的 显示 颜色 。 这 些 属性 一 般 定 义 在 <body> 标 记 中 ， 需 在 文档 布 


局 确定 之 前 完成 设置 。 
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1. alinkColor 属性 


该 属性 的 作用 是 设置 文档 中 活动 链接 的 颜色 ， 而 活动 链接 是 指 用 户 正在 使 用 的 超级 链 
接 。 使 用 document 的 alinkColor 属性 ， 可 以 自己 定义 活动 链接 的 颜色 ， 其 语法 格式 为 如 下 : 


document .alinkColor= "colorValue"; 


其 中 ，colorValue 是 用 户 指定 的 颜色 ， 其 值 可 以 是 red、blue、green、black、gray 等 颜色 
名 称 ， 也 可 以 是 十 六 进 制 的 RGB。 例如 白色 对 应 十 六 进 制 的 RGB 值 是 证 FFF。 在 正 浏览 器 
中 ， 活 动 链接 的 默认 颜色 为 蓝 色 ， 用 颜色 表示 就 是 blue 或 #0000FF。 用 户 在 设 定 活动 链接 的 
颜色 时 ， 需 要 在 页 面 的 <scrip 作 标记 中 添加 指定 活动 链接 颜色 的 语句 。 

例如 ， 要 求 指定 用 户 单 击 链 接 时 ， 链 接 的 颜色 为 红色 。 其 代码 如 下 : 


<Script language="JavaSscript" type="text/javascript"> 
<!-- 
document .alinkColor="red"; 
人 
</Script> 


另外 ， 使 用 <body> 标 记 的 onload 事件 也 可 以 实现 上 述 要 求 。 其 方法 如 下 : 
<body onload="document .alinkColor='red';"> 
en 使 用 基于 RGB 的 16 位 色 时 ， 需 要 注意 在 值 前 面 加 上 # 号 。 另 外 ，RGB 的 大 


江 。 色 值 在 书写 时 可 以 不 区 分 大 小 写 。 例如，red 与 Red、RED 的 实现 效果 相同 ; 
#ff0000 与 证 F0000 的 实现 效果 相同 。 


2.bgColor 属性 


bgColor 表示 文档 的 背景 颜色 ， 文 档 的 背景 色 通 过 document 对 象 的 bgColor 属性 进行 获取 
或 更 改 。 使 用 bgColor 获取 背景 色 的 语法 格式 如 下 : 


Var colorstr=document .bgColor; 


其 中 ，colorStr 是 当前 文档 背景 色 的 值 。 使 用 document 对 象 的 bgColor 属性 时 ， 由 于 
JavaScript 是 区 分 大 小 写 的 ， 因 此 必须 严格 按照 背景 色 的 属性 名 bgColor 来 对 文档 的 背景 色 进 
行 操作 。 使 用 bgColor 属性 获取 的 文档 的 背景 色 是 以 # 号 开头 的 基于 RGB 的 16 进 制 颜色 字符 
串 。 在 设置 背景 色 时 ， 可 以 使 用 颜色 字符 串 red、green 和 blue 等 。 


3. fgColor 属性 


使 用 document 对 象 的 如 Color 属性 可 以 修改 文档 中 的 文字 颜色 ， 即 设置 文档 的 前 景色 。 
其 语法 格式 如 下 : 
Var fgColorobj=document .fgColor; 


其 中 ，fgColorObj 表示 当前 文档 的 前 景色 的 。 获 取 与 设置 文档 前 景色 的 方法 与 操作 文档 
背景 色 的 方法 相似 。 
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4. linkColor 属性 


使 用 document 对 象 的 linkColor 属性 可 以 设置 文档 中 未 访问 链接 的 颜色 。 其 属性 值 与 
alinkColor 类 似 ， 通 常用 十 六 进 制 RGB 颜色 字符 串 表 示 。 

使 用 Javaseript 设置 文档 链接 的 颜色 的 语法 格式 如 下 

var colorVal=document.1LinkColor; // 获 取 当 前 文档 中 链接 的 颜色 

document .linkColor="colorValue"; // 设 置 当 前 文档 链接 的 颜色 

其 中 ，colorVal 是 获取 当前 文档 链接 颜色 的 字符 串 ， 其 值 与 获取 文档 背景 色 的 值 相似 ， 都 
是 十 六 进 制 RGB 颜色 字符 串 。 而 colorValue 是 需要 给 链接 设置 的 颜色 值 。 由 于 JavaScript 区 
分 大 小 写 ， 因 此 使 用 此 属性 时 仍然 要 注意 大 小 写 ， 否 则 在 JavaScript 中 ， 无 法 通过 linkColor 
属性 获取 或 修改 文档 未 访问 链接 的 颜色 。 

用 户 设 定 文档 链接 的 颜色 时 ， 需 要 在 页 面 的 <script> 标 记 中 添加 指定 文档 未 访问 链接 颜色 
的 语句 。 例 如 需要 指定 文档 未 访问 链接 的 颜色 为 红色 ， 其 方法 如 下 : 


< Script language ="JavaScript" type="text/javascript"> 

<!-- 

document .linkColor="red"; 

i 

</script> 

与 设 定 活动 链接 颜色 的 方法 相似 ， 在 <body> 标 记 的 onload 事件 中 也 可 以 设置 文档 链接 的 
颜色 。 其 方法 如 下 : 


<body onload="document .linkColor='red';"> 
5. vlinkColor 属性 


使 用 document 对 象 的 vlinkColor 属性 可 以 设置 文档 中 用 户 已 访问 的 链接 的 颜色 。 其 实现 
方法 如 下 : 

var colorstr=document .vlinkColor;  // 获 取 用 户 已 观察 过 的 文档 链接 的 颜色 

document .vlinkColor="colorstr"; // 设 置 用 户 已 观察 过 的 文档 链接 的 颜色 

document 对 象 的 vlinkColor 属性 的 使 用 方法 与 使 用 alinkColor 属性 相似 。 在 正 浏览 器 
中 ， 默 认 的 用 户 已 观察 过 的 文档 链接 的 颜色 为 紫色 。 用 户 在 设置 已 访问 链接 的 颜色 时 ， 需 要 
在 页 面 的 <script> 标 记 中 添加 指定 已 访问 链接 颜色 的 语句 。 

例如 ， 要 求 指定 用 户 已 观察 过 的 链接 的 颜色 为 绿色 。 其 方法 如 下 : 


< Script language ="Javascript" type="text/javascript"> 
i 

document .vlinkColor="green"; 

/==> 

</script> 


另外 ， 使 用 <body> 标 记 的 onload 事件 也 可 以 实现 上 述 要 求 。 其 方法 如 下 : 


<body onload="document .vlinkColor='green';"> 


下 面 的 HTML 文档 中 包含 本 节 中 提 到 的 各 颜色 的 属性 ， 其 作用 是 动态 改变 页 面 的 背景 颜 
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色 和 查看 已 访问 链接 的 颜色 。 
【 例 10.1】 (实例 文件 ，ch10\10.1.htmD 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv=content-type content="text/html; charset=gb2312"> 
<title> 综 合 应 用 Document 对 象 中 的 颜色 属性 </title> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
// 设 置 文档 的 颜色 显示 
function SetColor() 
{ 
document .bgColor="yellow"; 
document .fgColor="green"; 
document .linkColor="red"; 
document .alinkColor="blue"; 
document .vlinkColor="purple"; 


} 
// 改 变 文档 的 背景 色 为 海蓝 色 
function ChangeColorOver () 
{ 
document .bgColor="navy"; 
return; 


} 
// 改 变 文档 的 背景 色 为 黄色 
function ChangeColorout () 
{ 
document .bgColor="yellow"; 
return; 
} 
WA 
</script> 
</head> 
<body onload="SetColor()"> 
<center> 
<br> 
<p> 设 置 颜色 </p> 
<a href="index.html"> 链 接 颜色 </a> 
<form name="MyForm3"> 
<input type="submit" name="MYSure" value=" 动 态 背 景色 " 
onmouseover="ChangeColorOver()" onmouseOut="ChangeColorOut () "> 
</form> 
<center> 
</body> 
</html> 


上 述 代码 通过 onload 事件 调用 SetColor0 方 法 来 设置 页 面 各 个 颜色 属性 的 初始 值 。 其 中 ， 
HTML 文件 在 正 浏览 器 中 的 运行 结果 如 图 10-1 所 示 。 

当 鼠 标 移动 到 【动态 背景 色 】 按 钮 上 时 即 可 触发 onmouseOver 事件 调用 ChangeColorOver0 
方法 动态 改变 文档 的 背景 颜色 ， 使 其 变 为 海蓝 色 ， 如 图 10-2 所 示 。 而 当 鼠 标 移 离 【 动 态 背 
景色 】 按 钮 时 ， 即 可 触发 onmouseOut 事件 调用 ChangeColorOut( 方 法 将 页 面 背景 颜色 恢复 
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以 使 链接 指向 当前 文档 或 不 同文 档 中 的 指定 位 置 。 锚 点 常常 被 用 


10-1 页 面 各 个 颜色 的 初始 值 


10-2 ”动态 改变 文档 的 背景 颜色 


另外 ， 单 击 【 链 接 颜 色 】 链 接 还 可 以 查看 设置 的 已 访问 链接 的 颜色 ， 如 图 10-3 所 示 。 


EO 
外 | ps 用 户 目录 Documents\104.html EE 
总 结合 应 寻 Document 对 萌 中 
文件 站 ” 久 铬 EE) ”查看 (V) 收藏 夫 (A) 工具 (T) 项 动 H) 
广 接 韶 
动态 表 景 | 
fleVWDY/ 玫 产 已 录 /Documentsyindexhtml 所 100%6 


图 10-3 ”查看 设置 的 已 访问 链接 的 颜色 


10.3.2 ”案例 一 一 网 页 锚 点 的 设置 
锚 是 指 在 文档 中 设置 的 位 置 标记 ， 并 给 该 位 置 一 个 名 称 ， 以 便 引 用 。 通 过 创建 锚 点 ， 可 


来 跳 转 到 特定 的 主题 或 文档 


的 项 部， 使 访问 者 能 够 快速 浏览 到 选 定 的 位 置 ， 从 而 加 快 信息 检索 速度 。 例 如 ， 在 多 数 帮助 
文档 中 ， 单 击 当 前 文档 中 列表 信息 的 某 个 锚 点 ， 会 跳 转 到 当前 锚 点 所 代表 的 内 容 的 详细 信息 


处 ， 


顺序 跳 转 至 第 一 个 锚 点 。 如 果 页 面 


在 详细 信息 的 底部 有 一 个 “返回 ” 锚 点 ， 单 击 返 回 锚 点 ， 


使 用 这 种 方式 进行 跳 转 的 语法 如 下 : 
<a href="#hrefName"> 锚 点 </a> 


其 中 ，hrefName 是 需要 跳 转 型 
另外 ， 如 果 页 面 中 多 个 锚 点 的 


会 再 次 回 到 页 面 顶部 。 


目标 锚 点 的 name 属性 值 。 
name 属性 与 目标 锚 点 的 值 相同 ， 则 系统 会 按照 文档 的 先后 
i 中 不 存在 名 称 为 指定 锚 点 的 锚 点 ， 则 单 击 此 锚 点 时 ， 不 会 


有 任何 动作 。 如 果 需 要 跳 转 到 另 一 个 页 面 中 的 某 个 锚 点 位 置 ， 则 跳 转 语 句 为 


<a href="#fileName#hrefName"> 锚 点 </a>. 


其 中 ，fileName 指定 了 需要 跳 转 到 另 一 个 页 面 的 URL。href Name 则 指定 了 需要 跳 转 到 目 
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案例 课堂 9 一 
标 页 面 中 的 目标 锚 点 。 
em 如 果 需 要 锚 点 的 跳 转 ， 则 hrefName 必 不 可 少 ， 且 必须 在 目标 锚 点 的 名 称 前 添 
SS 加 # 号 ， 和 否则 无 法 跳 转 至 指定 锚 点 。 如 果 在 文档 锚 点 的 描述 符 中 指定 了 其 href 属 


性 值 (<a hre 伟 ""> 锚 点 链接 </a>)， 则 此 文档 锚 点 也 会 形成 一 个 链接 。 


如 果 文 档 中 存在 多 个 锚 点 ， 可 以 使 用 document 对 象 的 anchors 属性 ， 获 取 当 前 文档 锚 点 
数组 。 其 使 用 方法 如 下 : 


Var anchorAry=document .anchors7 


其 中 ，anchorAry 代表 获得 的 文档 的 锚 点 对 象 数组 。anchors 锚 点 数组 本 身 是 一 个 对 象 ， 
使 用 其 length 属性 可 以 得 到 当前 文档 中 锚 点 对 象 的 个 数 。 如 果 一 个 锚 点 对 象 也 是 链接 ， 则 该 
对 象 在 锚 点 对 象 数组 中 出 现 的 同时 ， 也 会 出 现在 链接 数组 中 。 

【 例 10.2】 (实例 文件 ，ch10\10.2.html) 在 HTML 文档 中 使 用 document 对 象 的 anchors 属 
性 获得 文档 中 锚 点 对 象 数组 ， 并 将 其 遍历 出 来 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 文 档 中 的 锚 点 </title> 
<script language="JavaScript" type="text/javascript"> 
ee 
function getAnchors() 


{ 


var anchorAry = document .anchors; // 得 到 锚 点 数组 
window.alert(" 锚 点 数组 大 小 : "+ anchorAry.length); 
for (Var i=0; i<anchorAry.length; i++) 
| 
window.alert ("第 "” + (i + 1) + "个 锚 点 是 : ”+ anchorAry[i] .name) 7 
} 
WN 
</script> 
</head> 
<body> 
<form name="frmData" method="post" action="#"> 
<center> 
<ul> 
<li><a href="#1inkName"” name="whatLink"> 电 子 商务 </a></1i> 
<1i><a href="#"” name="colorLink"> 时 尚 服饰 </a></1i> 
过/ 
</center> 
<br> 
<p><input type="button"” value=" 锚 点 数组 " onclick="getAnchors()"></p> 
<br> 
<p></p> 
<p> 
<a name="1inkName"> 电 子 商 务 </a> 
<br> 
电子 商务 通常 是 指 是 在 全 球 各 地 广泛 的 商业 贸易 活动 中 ， 在 因特网 开放 的 网 络 环境 下 ， 基 于 浏览 器 
/服务 器 应 用 方式 ， 而 买卖 双方 不 用 见面 地 进行 各 种 商贸 活动 。 


售 2a0 


</p> 
<a href="#whatLink"> 返 回 </a> 
</form> 
</body> 
</html> 


在 正 9.0 浏览 器 中 打开 上 述 HTML 文档 ， 单 击 其 中 的 【 锚 点 数组 】 按 钮 ， 即 可 显示 锚 点 
数组 大 小 ， 结 果 如 图 10-4 所 示 。 
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图 10-4 ”获取 锚 点 数组 大 小 
依次 单 击 【 确 定 】 按 钮 即 可 遍历 锚 点 对 象 数组 ， 显 示 效 果 如 图 10-5 所 示 。 


A sass:colorink A esa: linName 


图 10-5 遍历 锚 点 对 象 数组 
从 显示 效果 可 以 发 现 ， 文 档 中 有 4 个 <a> 标 记 ， 但 是 使 用 anchors 属性 获得 的 锚 点 对 象 数 
组 大 小 却 是 3。 遍 历 锚 点 对 象 数 组 之 后 ， 如 果 发 现 没 有 为 锚 点 赋予 name 属性 ， 则 使 用 
anchors 属性 ， 不 会 获取 到 本 锚 点 。 如 果 需 要 获取 所 有 的 锚 点 ， 可 以 使 用 以 下 DOM 方法 : 


Var aAry=document .getElementsByTagName ("a"); 


10.3.3 ”案例 一 一 窗 体 对 象 form 的 应 用 


窗 体 对 象 是 文档 对 象 的 一 个 元 素 ， 它 含有 多 种 格式 的 对 象 储存 信息 ， 使 用 它 可 以 在 
JavaScript 脚本 中 编写 程序 进行 文字 输入 ， 并 可 以 动态 地 改变 文档 的 行为 。 通 过 document. 
Forms[] 数 组 可 实现 在 同一 个 页 面 上 有 多 个 相同 窗 体 ， 使 用 forms[] 数 组 比 使 用 窗 体 名 字 要 方 
便 。 尽 管 如 此 ， 所 有 支持 脚本 的 浏览 器 ， 都 支持 以 下 两 种 通过 form 名 获取 窗 体 的 方法 : 


var formobj=document .forms ["formName"]; 
Var formobj=document .formName; 


其 中 ，fromObj 代表 获得 的 文档 的 窗 体 对 象 。formName 代表 页 面 中 指定 的 form 的 name 
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属性 值 。 
【 例 10.3】 (实例 文件 ，ch10\10.3.htmD) 在 HTML 文档 中 使 用 两 种 方式 获取 页 面 中 name 


属性 值 为 fmData 的 窗 体 ， 并 获取 窗 体内 部 称 为 hidField 的 隐藏 域 的 值 。 代 码 如 下 : 


<html> 
<head> 
<title> 文 档 中 的 表单 </title> 
<script language="JavaScript" type="text/javascript"> 
function getWin() 
{ 
window.alert (" 窗 体 的 长 度 : "+document .forms.lenght); 
window.alert(" 窗 体 中 隐藏 域 的 值 : "+document .frmData.hidField.value); 
window.alert ("使 用 名 称 数 组 得 到 的 隐藏 域 的 值 : 
"+document .forms ["frmData"] .hidField.value); 
1 
ME 
</script> 
</head> 
<body> 
<form name="frmData" method="post" action="#"> 
<input type="hidden" name="hidField" value="123"> 
<input type="button"” value=" 得 到 窗 体 " onclick="getWin()"> 
</form> 
</body> 
</html> 


上 述 代码 使 用 了 表达 式 document.forms.length。 从 运行 效果 中 可 以 发 现 ，length 是 
document 对 象 的 forms 数组 的 长 度 ， 这 是 因为 使 用 document.forms 获取 的 是 一 个 对 象 。 
在 正 浏 览 器 中 打开 上 述 HTML 文档 如 图 10-6 所 示 。 


图 10-6 程序 运行 结果 


单 击 其 中 的 【得 到 窗 体 】 按 钮 ， 即 可 显示 锚 点 数组 大 小 ， 依 次 单 击 【确定 】 按 钮 ， 即 可 
遍历 锚 点 对 象 数 组 ， 其 显示 效果 如 图 10-7 所 示 。 


图 10-7 ”获取 文档 中 的 窗 体 


全 


10.3.4 ”案例 一 一 在 文档 中 输出 数据 


document 对 象 的 write0 方 法 可 向 指定 文档 中 写 入 内 容 。write0 方 法 可 在 以 下 两 种 情况 中 
使 用 。 

(1) 在 网 页 加 载 过 程 中 ， 使 用 动态 生成 的 内 容 创建 或 者 更 改 网 页 。 

(2) 在 当前 页 面 加 载 完毕 后 ， 使 用 指定 的 HTML 字符 串 创建 新 的 页 面 内 容 。 

write() 方 法 的 使 用 方法 为 docObj.write(htmlStr); 其 中 ，docObj 是 指定 的 document 对 象 ; 
htmlStr 是 需要 生成 的 内 容 ， 其 值 是 一 个 包含 有 生成 页 面 内 容 的 字符 串 。 如 果 给 write() 方 法 的 
参数 不 是 字符 串 ， 则 数值 型 数据 将 转换 为 对 应 数据 信息 的 字符 串 ， 布 尔 型 数据 将 转换 为 字符 
串 true 或 false; 如 果 给 write() 方 法 的 参数 是 一 个 对 象 ， 此 时 会 通过 toString() 方 法 将 对 象 转换 
为 字符 串 。 

writeln() 方 法 与 write() 方 法 两 者 功能 大 体 相 同 ， 只 是 后 者 会 在 每 一 次 调用 时 输出 一 个 换行 
符 。writeln() 方 法 与 write0 方 法 使 用 方法 相同 ， 其 语法 格式 如 下 : 


docobj .writeln (str); 


与 write(0) 方 法 相同 ，docObj 是 指定 的 document 对 象 ，str 是 需要 生成 的 内 容 ， 并 且 在 输 
出 内 容 时 ， 会 把 非 字 符 串 的 变量 转换 成 字符 串 。 二 者 的 不 同 之 处 在 于 : writeln0 方 法 会 在 其 输 
出 结果 后 添加 一 个 换行 符 (“\n”)， 而 write0 方 法 则 不 会 。 

【 例 10.4】 (实例 文件 ，ch10\10.4.htmD 在 HTML 文档 中 使 用 <pre> 标 签 说 明 write0 方 法 
与 writeln() 方 法 的 区 别 。 代 码 如 下 : 


<!DOCTYPE> 

<html> 

<head> 
<title> 在 文档 中 输出 数据 </title> 
</head> 

<body> 

<script language="javascript"> 


<! 
document .write ("使 用 write() 方 法 输出 的 第 一 段 内 容 ! ") ; 
document .write (" 使 用 write() 方 法 输出 的 第 二 段 内 容 <hr color='#003366'>"); 
document .writeln(" 使 用 writeln () 方 法 输出 的 第 一 段 内 容 ! ") ; 
document .writeln(" 使 用 writeln () 方 法 输出 的 第 二 段 内 容 <hr 
color="'#003366'>"); 
</script> 
<pre> 
<script language="javascript"> 
= 
document .writeln ("在 pre 标记 内 使 用 writeln () 方 法 输出 的 第 一 段 内 容 ! ") ; 
document .writeln ("在 pre 标记 内 使 用 writeln () 方 法 输出 的 第 二 段 内 容 ") ; 
一 -> 
</script> 
</pre> 
</body> 
</html> 
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上 述 HTML 文件 在 下 9.0 浏览 器 中 的 运行 结果 如 图 10-8 所 示 。 
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使 用 vzite () 方 法 输出 的 第 一 段 内 容 ! 使 用 rzite 0 方法 输出 的 第 
二 晤 内 容 


使 用 writeln 0) 方 法 输出 的 第 一 起 内 容 ! 使 用 writeln0 方 法 输 
出 的 第 二 段 内 容 


在 sre 标记 内 健 月 zitels 站 方 去 征 册 的 第 一 段 内 容 ! 
在 gre 标 记 内 使 朋 srirela1] 方 去 条 出 的 第 二 店内 在 


图 10-8 ”write() 与 writeln() 的 区 别 


10.3.5 ”案例 一 一 打开 新 窗口 并 输出 内 容 
document 对 象 的 open0 方 法 用 于 打开 指定 文档 ， 其 使 用 方法 如 下 : 


docobj .open([arg]); 


其 中 ，docObj 代表 需要 打开 的 document 对 象 ，arg 代表 指定 发 送 到 窗口 的 MIME 类 型 ， 
而 MIME 类 型 是 在 互联 网 上 描述 和 传输 多 媒体 的 规范 。 指 定 MIME 类 型 可 以 帮助 系统 识别 窗 
口中 信息 的 类 型 。 如 果 没 有 指定 MIME 类 型 ， 则 系统 默认 的 类 型 是 text/html。 

document 对 象 的 close() 方 法 用 来 关闭 输出 流 。 当 需要 使 用 JavaScript 动态 生成 页 面 时 ， 
使 用 该 方法 可 以 关闭 输出 流 。 其 使 用 方法 如 下 : 

docobj .close(); 


其 中 ，docObj 代表 需要 关闭 输出 流 的 document 对 象 。 本 方法 同样 不 需要 参数 ， 没 有 返回 
值 。 当 页 面 加 载 完毕 后 ， 再 调用 该 方法 不 会 有 任何 实现 效果 。 这 是 因为 页 面 加 载 完毕 后 ， 
document 对 象 的 close0 方 法 自动 执行 ， 但 是 当 使 用 JavaScript 调用 document 对 象 的 write() 方 
法 动态 生成 页 面 时 ， 如 果 没 有 使 用 close0 方 法 关闭 输出 流 ， 系 统 就 会 一 直 等 待 。 如 果 为 窗口 
添加 了 onload 事件 ， 那 么 在 没有 调用 close0 方 法 的 情况 下 ，onload 事件 不 会 被 触发 。 

【 例 10.5】 (实例 文件 ，ch10\10.5.htmD) 在 新 窗口 中 打开 文档 ， 并 添加 一 些 文本 。 代 码 如 下 : 


<html> 

<head> 

<script type="text/javascript"> 

function winTest() 
; 
var txtl = "这 是 一 个 新 窗口 。"; 
var txt2 "这 是 一 个 测试 。"; 
win.document .open ("text/html","replace"); 
win.document .writeln (txt1); 
win.document .write (txt2) 7 
win.document.close(); 
} 

</script> 

</head> 


<body> 

<script type="text/javascript"> 

Var win=window.open('','', 'width=200,height=200°'); 
winTest (); 


</script> 
</body> 
</html> 
上 述 HTML 文件 在 下 9.0 浏览 器 中 的 运行 结果 如 图 10-9 所 示 。 
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10-9 打开 新 窗口 并 输出 内 容 


10.3.6 ”案例 一 一 引用 文档 中 的 表单 和 图 片 


一 个 HTML 文档 中 的 每 个 <form> 标 记 都 会 在 Document 对 象 的 Forms[] 数 组 中 创建 一 个 元 
素 ， 同 样 ， 每 个 <img> 标 记 也 会 创建 一 个 images[] 数 组 的 元 素 。 同 时 ， 这 一 规则 还 适用 于 <a> 
和 <apple 亿 标记 ， 它 们 创建 的 数组 元 素 分 别 是 Links[] 和 applets[] 。 

在 一 个 页 面 中 ，document 对 象 具有 Form、Image 和 Applet 子 对 象 。 通 过 在 对 应 的 HTML 
标记 中 设置 name 属性 ， 就 可 以 使 用 名 字 引 用 这 些 对 象 。HTML 标记 包含 有 name 属性 时 ， 它 
的 值 将 被 用 作 document 对 象 的 属性 名 ， 用 来 引用 相应 的 对 象 。 

【 例 10.6】 (实例 文件 ，ch10\10.6.html) 使 用 document 对 象 引用 文档 中 的 表单 和 图 片 。 代 
码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title>document 属性 使 用 </title> 
</head> 

<body> 


<DIV > 
<H2> 在 文本 框 中 输入 内 容 ， 注 意 第 二 个 文本 框 变化 : </H2> 
<form> 
内 容 : <input type=text 
onChange="document .my.elements[0] .value=this.value;" > 
</form> 
<form name="my"> 
结果 : <input type=text 
onChange="document .forms [0] .elements [0] .value=this.value;"> 
</form> 
</DIV> 
</body> 
</html> 
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在 上 述 代码 中 ，document.forms[0] 引 用 了 当前 文档 中 的 第 一 个 表单 对 象 ，document.my 则 
引用 了 当前 文档 中 name 属性 为 my 的 表单 。 完 整 的 document.forms[0].elements[0].value 引用 
了 第 一 个 表单 中 第 一 个 文本 框 的 值 ， 而 document.my.elements[0].value 引用 了 名 为 my 的 表单 
中 第 一 个 文本 框 的 值 。 

上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 10-10 所 示 ， 当 在 第 一 个 文本 框 输入 内 容 
时 ， 和 鼠标 放 到 第 二 个 文本 框 时 ， 会 显示 第 一 个 文本 框 输入 的 内 容 。 这 是 因为 用 户 在 第 一 个 表 
单 的 文本 框 中 输入 内 容 的 行为 触发 了 onChange 事件 ， 使 得 第 二 个 文本 框 中 显示 的 内 容 与 第 一 
个 文本 框 中 的 内 容 一 样 。 
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在 文本 框 中 输入 内 容 ， 注 意 第 二 个 文本 框 变化 : 
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图 10-10 document 对 象 使 用 


如 果 要 使 用 JavaScript 代码 对 文档 中 图 像 标记 <img> 进 行 操作 ， 需 要 使 用 到 document 对 
象 。document 对 象 提 供 了 多 种 访问 文档 中 标记 的 方法 ， 以 图 像 标 记 为 例 。 
通过 集合 引用 图 像 标 记 的 代码 如 下 : 


document .images // 对 应 页 面 上 的 <img> 标 记 
document . images .length // 对 应 页 面 上 <img> 标 记 的 个 数 
document .images [0] // 第 1 个 <img> 标 记 

document .images [i] // 第 i-l 个 <img> 标 记 


通过 nane 属性 直接 引用 图 像 标 记 的 代码 如 下 : 


<img name="oImage"> 

<script language="javascript"> 

document .images .oImage //document .images.name 属性 
</script> 


通过 图 片 的 src 属性 图 像 标 记 的 代码 如 下 : 
document . images.oImage.src //document.images.name 属性 .src 


【 例 10.7】 (实例 文件 ，ch10\10.7.htmD) 代 码 如 下 : 


<html> 

<head> 
<title> 文 档 中 的 图 片 </title> 
</head> 

<body> 


<p> 下 面 显示 了 一 张 图 片 </p> 
<img name=imagel width=200 height=120> 
<script language="javascript"> 

var imagel 

imagel = new Image() 
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document .images .imagel.src="f:/ 源 文件 /ch10/12.jpg" 

</script> 

</body> 

</html> 

上 述 代 码 首 先 创建 了 一 个 img 标记 ， 该 标记 没有 使 用 src 属性 用 于 获取 显示 的 图 片 。 在 
JavaScript 代码 中 ， 首 先 创 建 了 一 个 imagel 对 象 ， 该 对 象 使 用 new image 实例 化 ， 然 后 使 用 
document 属性 设置 img 标记 的 src 属性 。 

上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 10-11 所 示 。 
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图 10-11 文档 中 设置 图 片 


10.3.7 ”案例 一 一 设置 文档 中 的 超 链 接 


文档 对 象 document 中 的 属性 之 一 links， 主 要 用 于 返回 页 面 中 所 有 链接 标记 所 组 成 的 数 
组 。 同 时 ， 它 还 可 以 用 于 处 理 一 些 通用 的 链接 标记 。 例 如 在 Web 标准 的 strict 模式 下 ， 链 接 
标记 的 target 属性 是 被 禁止 的 ， 它 无 法 通过 W3C 关于 网 页 标准 的 验证 。 如 果 想 在 符合 strict 
标准 的 页 面 中 让 链接 在 新 建 窗口 中 打开 ， 可 以 使 用 以 下 代码 : 


var links=document .links; 
for (Var i=0;i<links.length;i++){ 
links[i] .target=" blank"; 


【 例 10.8】 (实例 文件 ，ch10\10.8.htmD) 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 显 示 页 面 的 所 有 链接 </title> 
<script language="JavaScriptl1.2"> 
过 全 
function extractlinks(){ 
//var links=document.all.tags ("A") 
Var links=document.links; 
var total=links.length 
Var win2=window.open("","","menubar,scrollbars,toolbar") 
win2.document -write ("<font size="'2'> 一 共有 "+total+" 个 连接 </font><br>") 
for (i=0;i<total;i++){ 


山 当 1ueunooa 一 办 当 详 半月 育才 0 小 


27@ 


令 238 


JavaScript 动 态 网 站 开发 


案例 课堂 >… 


win2.document .write ("<font size="'2'>"+links[i] .outerHTML+"</font><br>") 


} 
} 

> 

</script> 

</head> 

<body> 

<input type="button" onClick="extractlinks () " value=" 显 示 所 有 的 连接 "> 
<p> </p> 
<p><a target=" blank" href="http://www.sohu.com/"> 搜 狐 </a></p> 
<p><a target=" blank" href="http://www.sina.com/"> 新 浪 </a></p> 
<p><a target=" blank" href="http://www.163.com/">163</a></p> 
<p> 连 接 1</p> 
<p> 连 接 1</p> 
<p> 连 接 1</p> 
<p> 连 接 1</p> 

</body> 

</html> 


在 上 述 HTML 代码 中 ， 创 建 了 多 个 标记 ， 例 如 表单 标记 input、 段 落 标记 和 3 个 超级 链接 


标记 。 在 JavaScript 函数 中 ， 函 数 extractlinks 的 功能 就 是 获取 当前 页 面 中 的 所 有 超级 链接 ， 
并 在 新 窗口 中 输出 。 其 中 document.links 的 功能 是 获取 当前 页 面 所 有 链接 ， 并 将 它们 存储 到 数 
组 中 ， 其 功能 和 document.all.tags("A") 语 句 的 功能 相同 。 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 10-12 所 示 。 单 击 【 显 示 所 有 的 连接 】 按 


图 10-12 ”获取 所 有 链接 图 10-13 ”超级 链接 新 窗口 


10.4 ”实战 演练 一 一 综合 使 用 各 种 对 话 框 


【 例 10.9】 (实例 文件 : chl0\10.9.html) 综 合 使 用 各 种 对 话 框 处 理 文档 对 象 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<script type="text/javascript"> 
function display alert() 


alert ("我 是 弹出 对 话 框 ") 


} 
function disp prompt() 

{ 

var name=prompt ("请 输入 名 称 ","") 

if (name!=null && name!="") 
{ 
document.write(" 你 好 " + name + "!") 
} 

} 

function disp confirm() 

: 

var r=confirm(" 按 下 按钮 ") 

if (r==true) 
{ 
document .write(" 单 击 确定 按钮 ") 
} 

else 
{ 
document .write(" 单 击 返 回 按钮 ") 
} 

} 


</script> 

</head> 

<body> 

<input type="button" onclick="display alert()" value=" 弹 出 对 话 框 ” /> 
<input type="button"” onclick="disp_prompt () "” value=" 输 入 对 话 框 ” /> 
<input type="button"” onclick="disp_confirm()" value=" 选 择 对 话 框 ” /> 
</body> 

</html> 


在 上 述 HTML 代码 中 ,创建 了 3 个 表单 按钮 ， 并 为 3 个 按钮 分 别 添加 了 单 击 事件 ， 即 单 


Ud 


击 不 同 的 按钮 时 ， 可 调用 不 同 的 JavaScript 函数 。 在 JavaScript 代码 中 ， 创 建 了 3 个 JavaScript 


函数 。 这 3 个 函数 分 别 调用 了 window 对 象 的 alert0 方 法 、confirm0 方 法 和 prompt0 方 法 ， 创 
建 了 不 同形 式 的 对 话 框 。 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 10-14 所 示 。 当 单 击 3 个 按钮 时 ， 系 统 会 显 


示 弹 出 对 话 框 、 选 择 对 话 框 和 输入 对 话 框 ， 如 图 10-15 所 示 。 
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10-14 ”对 话 框 显示 效果 
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10-15 ”对 话 框 显示 效果 


10.5” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: JavaScript 文档 对 象 的 使 用 。 
练习 2: JavaScript 文档 对 象 的 属性 和 方法 。 
练习 3: JavaScript 对 象 的 应 用 。 


10.6 高 手 甜 点 


甜点 1: 应 用 close0 方 法 关闭 文档 要 注意 哪些 事项 ? 


使 用 close0 关 闭 文 档 ， 需 停止 写 入 数据 。 如 果 使 用 了 write[ln]0 或 clear0 方 法 ， 就 一 定 要 
使 用 close() 方 法 来 保证 所 做 的 更 改 能 够 显示 出 来 。 如 果 文 档 还 没有 完全 读 取 ， 也 就 是 说 ， 
JavaScript 是 插 在 文档 中 的 ， 那 就 不 必 使 用 该 方法 。 


甜点 2: 如 何 调用 open() 方 法 打开 文档 ? 


使 用 open() 方 法 打开 文档 的 四 级 是 使 JavaScript 能 向 文档 的 当前 位 置 ( 指 插入 JavaScript 的 
位 置 ) 写 入 数据 。 但 是 通常 不 需要 使 用 该 方法 ， 因 为 在 需要 的 时 候 JavaScript 会 自动 调用 该 
方法 : 
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对 象 的 相关 内 容 。 
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11.1 了 解 window 对 象 属性 和 方法 


window 对 象 表 示 一 个 浏览 器 窗口 或 一 个 框架 。 在 客户 端 JavaScript 中 ，Window 对 象 是 
全 局 对 象 ， 所 有 的 表达 式 都 在 当前 的 环境 中 计算 。 也 就 是 说 ， 要 引用 当前 窗口 根本 不 需要 特 
殊 的 语法 ， 只 需 把 该 窗口 的 属性 作为 全 局 变量 来 使 用 就 可 以 了 。 例 如 ，document 不 必 写 成 
window.document。 同 理 ， 也 可 以 把 要 引用 的 当前 窗口 对 象 的 方法 当 作 函数 来 使 用 ， 例 如 
alert(0 不 必 写 成 Window.alert()。 


11.1.1 window 对 象 的 属性 


Window 对 象 可 实现 核心 JavaScript 所 定义 的 所 有 全 局 属性 和 方法 。Window 对 象 的 
window 属性 和 self 属性 引用 的 都 是 它们 自己 。Windows 对 象 属性 如 表 11-1 所 示 。 


表 11-1 window 对 象 属性 
属性 名 称 说 明 


Closed 一 个 布尔 值 ， 当 窗口 被 关闭 时 此 属性 为 tue， 默 认为 false 
defaultStatus, status 一 个 字符 串 ， 用 于 设置 在 浏览 器 状态 栏 显 示 的 文本 

Document 对 Document 对 象 的 引用 ， 该 对 象 表示 在 窗口 中 显示 的 HIML 文件 
Frames Window 对 象 的 数组 ， 代 表 窗 口 的 各 个 框架 

history 对 history 对 象 的 引用 ， 该 对 象 代表 用 户 浏览 器 窗口 的 历史 
innerHight, innerWidth, 

二 outerWidth 外 

location 对 location 对 象 的 引用 ， 该 对 象 代表 在 窗口 中 显示 的 文档 的 URL 


Locationbar, menubar, 对 窗口 中 各 种 工具 栏 的 引用 ， 像 地 址 栏 、 工 具 栏 、 菜 单 栏 、 滚 动 条 等 这 
scrollbars，statusbar，toolbar | 些 对 象 分 别 用 来 设置 浏览 器 窗口 中 各 个 部 分 的 可 见 性 


name 窗口 的 名 称 ， 可 被 HTML 标记 <a> 的 target 属性 使 用 
对 打开 当前 窗口 的 Window 对 象 的 引用 。 如 果 当 前 窗口 被 用 户 打开 ， 则 
区 全 它 的 值 为 null 
pageXOffset，pageYOffset | 在 窗口 中 滚动 到 右边 和 下 边 的 数量 
parent 如 果 当 前 的 窗口 是 框架 ， 它 就 是 对 窗口 中 包含 该 框架 的 引用 
self 自 引用 属性 ， 是 对 当前 Window 对 象 的 引用 ， 与 window 属性 相同 
如 果 当 前 窗口 是 一 个 框架 ， 那 么 它 就 是 对 包含 该 框架 顶级 窗口 的 
top Window 对 象 的 引用 。 注 意 ， 对 于 嵌 套 在 其 他 框架 中 的 框架 来 说 ，top 不 
等 同 于 parent 
window, 自 引 用 属性 ， 是 对 当前 Window 对 象 的 引用 ， 与 self 属性 相同 
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Window 对 象 常 用 方法 如 表 11-2 所 示 。 

表 11-2 window 对 象 方 法 是 

方 法 说 明 邓 

close0) 关闭 窗口 加 

rR 执行 浏览 器 查找 、 主 页 、 打 印 和 停止 按钮 的 功能 ， 就 像 用 户 单 击 窗 
1n( 了 lome(), rint( ), Sto] 

有 了 窗口 中 这 些 按钮 一 样 对 

象 


请 求 或 放弃 窗口 的 键盘 焦点 。Focus0 方 法 还 将 把 窗口 置 于 最 上 
Focus(), blurO 


层 ， 使 窗口 可 见 
moveBy0，moveTo0 移动 窗口 
resizeBy(), resizeTo() 调整 窗口 大 小 
scrollBy0，scrollTo0 滚动 窗口 中 显示 的 文档 
设置 或 者 取消 重复 调用 的 函数 ， 该 函数 在 两 次 调用 之 间 有 指定 的 
setInterval(), clearInterval() E 
延迟 
setTimeout(), clearTimeout() 设置 或 者 取消 在 指定 的 若干 秒 后 调用 一 次 的 函数 
11.2 对 话 框 


对 话 框 作用 就 是 和 浏览 者 进行 交流 ， 有 提示 、 选 择 和 获取 信息 的 功能 。JavaScript 提供 了 
3 个 标准 的 对 话 框 ， 分 别 是 弹出 对 话 框 、 选 择 对话 框 和 输入 对 话 框 。 这 3 个 对 话 框 都 基于 
window 对 象 产生 ， 即 作为 window 对 象 的 方法 而 被 使 用 。 

window 对 象 中 对 话 框 如 表 11-3 所 示 。 


表 11-3 window 对 象 对 话 框 


对 话 框 说 明 
alert0 | 弹出 一 个 只 包含 【确定 】 按 钮 的 对 话 框 
confirmO ”| 弹出 一 个 包含 【确定 】 和 【取消 】 按 钮 的 对 话 框 ， 要 求 用 户 做 出 选择 。 单 击 【 确 定 】 按 
钮 ， 则 返回 true 值 ， 单 击 【 取 消 】 按 钮 ， 则 返回 false 值 


promptO 弹出 一 个 包含 【确认 】 和 【取消 〗 和 一 个 文本 框 的 对 话 框 ， 要 求 用 户 在 文本 框 输入 一 些 
数据 。 单 击 【确认 〗】， 则 返回 文本 框 里 已 有 的 内 容 ; 单 击 【 取 消 】〗 按 钮 ， 则 返回 null 
值 。 如 果 指 定 < 初始 值 >， 则 文本 框 里 会 有 默认 值 


11.2.1 案例 一 一 警告 对 话 框 
使 用 alert0 方 法 会 弹出 一 个 带 有 【确定 】 按 钮 及 相关 信息 的 消息 框 。 其 使 用 方法 如 下 
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window.alert ("msg"); 


其 中 ，msg 是 在 对 话 框 中 显示 的 提示 信息 。 当 使 用 alert0 方 法 打开 消息 框 时 ， 整 个 文档 的 
加 载 以 及 所 有 脚本 的 执行 等 操作 都 会 暂停 ， 直 到 用 户 单 击 消息 框 中 的 【确定 】 按 钮 ， 所 有 的 
动作 才 继 续 执行 。 

【 例 11.1】 (实例 文件 : chll\11.1.htmD) 使 用 alert0 方 法 弹出 了 一 个 含有 提示 信息 的 对 话 
框 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Windows 提示 框 </title> 
<script language="JavaScript" type="text/javaSscript"> 
二 二 = 
window.alert(" 提 示 信息 ") ; 


function showMsg (msg) 

{ 
if(msg == "简介 ") window .alert ("提示 信息 : 简介 ") ; 
window.status = "显示 本 站 的 ”+ msg; 
return true; 

} 

window.defaultstatus = "欢迎 光临 本 网 站 "; 

A 

</script> 

</head> 

<body> 


<form name="frmData" method="post" action="#"> 


<table width="400" align="center" border= cellspacing="0"> 
<thead> 
<th colspan="3"> 在 线 购物 网 站 </th> 
</thead> 
<SCRIPT LANGUAGE="JavaScript" type="text/javascript"> 
<!-- 
window.alert (" 加 载 过 程 中 的 提示 信息 ") ; 
| te 
</script> 
区 
<td valign="top" width="200"> 
<ul> 
<li><a href="#" onmouseover="return showMsg(' 主 页 ') "> 主页 
</a></1i> 
<1i><a href="#" onmouseover="return showMsg (' 简 介 ')"> 简 介 
</a></1i> 
<1i><a href="#" onmouseover="return showMsg (' 联 系 方式 ')"> 联 系 方式 
</a></1i> 
<1i><a href="#" onmouseover="return showMsg (' 业 务 介绍 ')"> 业 务 介绍 
</a></1i> 
</ul> 
</td> 


<td valign="top" width="300"> 
上 网 购物 是 新 的 一 种 购物 理念 


</td> 


</tr> 
</table> 
</form> 
</body> 
</html> 
当 上 述 代码 加 载 至 JavaScript 中 的 第 一 条 window.alert0 语 句 时 ， 系 统 会 弹出 一 个 提示 
框 ， 如 图 11-1 所 示 。 
当 页 面 加 载 至 table 时 ， 状 态 条 若 显 示 “ 欢 迎 光临 本 网 站 ”的 提示 消息 ， 说 明 设 置 状 态 条 
默认 信息 的 语句 已 经 执行 ， 如 图 11-2 所 示 。 
当 鼠 标 移 至 超级 链接 “简介 ”处 时 ， 即 可 看 到 相应 的 提示 信息 ， 如 图 11-3 所 示 。 待 整个 
页 面 加 载 完 毕 ， 状 态 条 会 显示 默认 的 信息 。 
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11-3 ”鼠标 移 至 超 链 接 时 的 提示 信息 
11.2.2 ”案例 一 一 询问 对 话 框 


使 用 window 对 象 的 confirm0 方 法 可 对 用 户 正在 进行 的 操作 进行 确认 。 其 使 用 方法 
如 下 : 


Var rtnVal=window.confirm("cfmMsg"); 


其 中 ，rtmVal 表示 的 是 confirm0 方 法 的 返回 值 ， 它 是 属于 boolean 型 的 数据 ， 而 cftmMsg 
是 弹出 对 话 框 的 提示 信息 。 

使 用 window.confirm0 方 法 ， 系 统 将 弹出 一 个 带 有 【确定 】 和 【取消 】 按 钮 的 用 户 指定 的 
提示 信息 的 对 话 框 。 在 确认 对 话 框 弹出 后 ， 用 户 作出 反应 之 前 ,文档 的 加 载 、 脚 本 的 执行 也 
会 像 window.alert0 一 样 ， 暂 停 执 行 ， 直 到 用 户 做 出 单 击 【 确 定 】、【 取 消 】 按 钮 或 关闭 对 话 
框 的 操作 后 ， 程 序 才 会 继续 运行 。 当 用 户 单 击 【 确 定 】 按 钮 时 ，window.confirm() 方 法 返回 
true; 当 用 户 单 击 【 取 消 】 按 钮 或 【关闭 】 按 钮 时 ， 将 返回 false。 
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【 例 11.2】 (实例 文件 : chll\11.2.html)confirm() 方 法 的 具体 使 用 过 程 。 代 码 如 下 : 


<!DOCTYPE html > 
<html> 
<head> 
<title>alert 方法 与 confirm 方法 比较 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" > 
<script type="text/javascript"> 
5 三 三 
function destroy() 


if (confirm(" 确 定 关闭 该 网 页 吗 ? ") ) // confirm () 方 法 用 作 判 断 条 件 
alert (" 是 的 ， 我 确定 要 关闭 此 网 页 ") ; ”“// 显 示 确定 信息 


else // 如 果 没 有 确定 
alert ("您 选择 的 是 不 关闭 网 页 ! ") ; // 显 示 信息 
} 
i 
</script> 
</head> 
<body> 


<div align="center"> 
<hl>alert () 方 法 与 confirm() 方 法 </h1> 
<hr> 
<form action="#" method="get"> 
<!-- 通 过 onclick 调用 destroy () 函数 --> 
<input type="button"” value=" 确 定 " onclick="destroy();" > 
</form> 
</div> 
</body> 
</html> 


在 正 浏览 器 中 运行 上 述 HTML 文件 ， 在 打开 的 页 面 中 单 击 【 确 定 】 按 钮 ， 即 可 弹出 是 
否 关 闭 该 网 页 的 提示 框 ， 如 图 11-4 所 示 。 若 单 击 【 确 定 】 按 钮 即 可 看 到 “是 的 ， 我 确定 要 关 
闭 此 网 页 ”信息 框 ， 如 图 11-5 所 示 。 若 单 击 【 取 消 】 按 钮 即 可 看 到 “来 自 网 页 的 消息 ”提示 
框 ， 提 示 用 户 选择 的 是 不 关闭 此 网 页 ， 如 图 11-6 所 示 。 
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11.2.3 ”案例 一 一 提示 对 话 框 


如 果 需 要 用 户 输入 简单 的 信息 ， 可 以 使 用 window 对 象 的 prompt() 方 法 。 其 使 用 方法 
如 下 : 


Var str=window.prompt ("strShow", "strIinput"); 


其 中 ，str 表示 的 是 接收 用 户 输入 的 字符 串 信息 ，strShow 是 一 个 在 对 话 框 中 显示 的 提示 
信息 字符 串 ;， strInput 是 打开 的 输入 对 话 框 中 的 文本 框 默认 显示 的 信息 。 使 用 window.promptO 
方法 ， 会 在 页 面 中 弹出 一 个 带 有 【确定 】 和 【取消 】 按 钮 、 提 示人 信息， 以 及 信息 输入 框 的 对 
话 框 。 

在 输入 对 话 框 弹出 后 ， 用 户 做 出 反应 之 前 ,文档 的 加 载 、 脚 本 的 执行 也 会 像 
window.alert(0 一 样 ， 和 暂停 执行 ， 直 到 用 户 做 出 单 击 【 确 定 】、【 取 消 】 按 钮 或 关闭 输入 对 话 
框 的 操作 ， 程 序 才 会 继续 运行 。 当 用 户 单 击 对 话 框 中 的 【确定 】 按 钮 时 ， 如 果 已 经 在 输入 框 
中 输入 了 信息 ， 则 返回 用 户 输入 的 信息 ; 如 果 用 户 没有 输入 信息 并 且 输入 框 中 没有 默认 值 ， 
会 返回 一 个 空 字符 串 。 如 果 用 户 单 击 【取消 】〗 按 钮 ， 则 会 返回 null。 

【 例 11.3】 (实例 文件 ，ch11\11.3.html)Prompts0 方 法 的 具体 使 用 过 程 。 代 码 如 下 : 


<!DOCTYPE html > 
<html > 
<head> 
<title>Prompts 方法 使 用 实例 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" > 
<script type="text/javascript"> 
== 
function askGuru() 
{ 
var question = prompt ("请 输入 数字 ?","") 
if (question != null) 
if (question == "") // 如 果 输 入 为 空 
alert ("您 还 没有 输入 数字 !") ; // 弹 出 提示 
else // 和 否则 
alert (" 你 输入 的 是 数字 哦 ! ") ; / /弹出 信息 框 
} 
了 
== 
</script> 
</head> 
<body> 
<div align="center"> 
<h1>Prompts 方法 使 用 实例 </h1> 
<hr> 
<br> 
<form action="#" method="get"> 
<!-- 通 过 onclick 调用 askGuru() 函数 --> 
<input type="button"” value=" 确 定 " onclick="askGuru();" > 
</form> 
</div> 
</body> 
</html> 
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在 正 浏览 器 中 运行 上 述 HTML 文件 ， 在 打开 的 页 面 中 单 击 【确定 】 按 钮 ， 即 可 弹出 是 
否 关闭 该 网 页 的 提示 框 ， 如 图 11-7 所 示 。 在 【请 输入 数字 】 文 本 框 中 输入 相应 的 数字 后 单 击 
【确定 】 按 钮 即 可 看 到 【你 输入 的 是 数字 哦 ! 】 信 息 框 ， 如 图 11-8 所 示 。 如 果 没 有 输入 数字 
就 单 击 【 确 定 】 按 钮 ， 即 可 看 到 【您 还 没有 输入 数字 】 提 示 框 ， 如 图 11-9 所 示 。 
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图 11-7 “请 输入 数字 ”对 话 框 图 11-8 ”提示 信息 框 。 图 11-9 提示 提示 框 
rg 使 用 window 对 象 的 alert() 方 法 、confirm() 方 法 、prompt0 方 法 都 会 弹出 一 个 


提示 

半 。 对 话 框 ， 并 且 在 对 话 框 弹出 后 ， 如 果 用 户 没 有 对 其 进行 操作 ， 那 么 当前 页 面 及 
JavaScript 都 会 暂停 执行 。 这 是 因为 使 用 这 3 种 方法 弹出 的 对 话 框 都 是 模式 对 话 框 ， 
除非 用 户 对 对 话 框 进行 操作 ， 否 则 程序 无 法 进行 其 他 应 用 (包括 无 法 操作 页 面 )。 


人 :3 窗 回 操作 


上 网 时 经 常会 遇 到 这 样 的 情况 ， 当 用 户 进 入 首页 时 或 者 按 一 个 链接 或 按钮 ， 会 弹出 一 个 
窗口 ， 通 常 窗口 里 会 显示 一 些 注意 事项 、 版 权 信息 、 和 警告 、 欢 迎 光顾 之 类 的 提示 信息 。 实 现 
这 种 弹出 窗口 非常 简单 ， 使 用 window 对 象 的 open 方法 即 可 。 


11.3.1 案例 一 一 打开 窗口 
使 用 window 对 象 的 open0 方 法 可 以 实现 打开 一 个 新 窗口 的 效果 。 其 使 用 方法 如 下 : 


Var win=window.open ("url","winName", "param"); 


其 中 ， 各 参数 的 含义 如 下 。 

e@ win: 是 打开 的 新 窗口 返回 的 值 ， 打 开 一 个 新 窗口 返回 值 指向 新 窗口 的 引用 。 

e@ url: 表示 目标 窗口 的 URL 地 址 (包括 路 径 和 文件 名 )， 如 果 rul 的 值 为 室 ， 则 不 打开 
任何 窗口 。 

e ”winName: 表示 目标 窗口 的 名 称 ， 或 HIML 的 内 建 名 称 ， 如 _self、_blank、_top 等 
HTML 内 建 对 象 。 

e@ ”param: 用 于 描述 被 打开 的 窗口 的 各 种 显示 效果 ， 如 果 param 的 值 为 空 ， 则 系统 将 会 
打开 一 个 普通 的 窗口 。 如 果 要 指定 打开 窗口 显示 效果 ， 就 需要 给 param 赋值 参数 ， 
多 个 参数 之 间 用 逗号 隔 开 。 
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例如 ， 打 开 一 个 宽 500 高 200 的 窗口 。 代 码 如 下 : 


open('',' blank'v "width=500,height=200,menubar=nortoolbar=nov 
location=no,directories=no, status=no, scrollbars=yes, resizable=yes') 


【 例 11.4】 (实例 文件 : chll\11.4.htmD 打 开 新 窗口 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 打 开 新 窗口 </title> 
</head> 
<body> 
<script language="JavasScript"> 
R= 
function setWindowStatus () 
上 
window.status="Window 对 象 的 简单 应 用 案例 ， 这 里 的 文本 是 由 status 属性 设置 的 。"; 
} 
function NewWindow() { 
msg=open("","DisplayWindow", "toolbar=no,directories=no,menubar=no"); 
msg.document .write ("<HEAD><TITLE> 新 窗口 </TITLE></HEAD>"); 
msg.document .write ("<CENTER><h2> 这 是 由 Window 对 象 的 Open 方法 所 打开 的 新 窗 
口 !</h2></CENTER>") 7 
} 
一 -> 
</script> 
<body onload="setWindowStatus () "> 
<input type="button" name="Buttonl" value=" 打 开 新 窗口 " 
onclick="NewWindow() "> 
</body> 
</html> 


在 上 述 代码 中 ， 使 用 onload 加 载 事 件 ， 调 用 JavaScript 函数 setWindowStatus， 用 于 设置 
状态 栏 的 显示 信息 。 创 建 了 一 个 按钮 ， 并 为 按钮 添加 了 单 击 事件 。 该 事件 的 处 理 程序 是 
NewWindow 函数 ， 在 这 个 函数 中 使 用 open 打开 了 一 个 新 的 窗口 。 

上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 11-10 所 示 ， 当 单 击 页 面 中 的 【打开 新 窗 
口 】 按 钮 时 ， 系 统 会 显示 如 图 11-11 所 示 窗 口 。 从 中 可 以 看 出 在 新 窗口 中 没有 显示 地 址 栏 和 
菜单 栏 等 信息 。 
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11.3.2 ”案例 一 一 关闭 窗口 
使 用 window 对 象 的 close0 方 法 可 关闭 指定 的 已 经 打开 的 窗口 。 关 闭 窗口 的 使 用 方法 如 下 : 


winObj.close(); 


其 中 ，winObj 代表 需要 关闭 的 window 对 象 ， 它 既 可 以 是 当前 窗口 的 window 对 象 ， 也 可 
以 是 用 户 指定 的 任何 window 对 象 。 

另外 ， 关 闭 当前 窗口 还 可 以 使 用 self close() 方 法 。 使 用 close() 方 法 关闭 窗口 时 ， 如 果 指 定 
被 关闭 的 窗口 有 状态 条 ， 浏 览 器 会 弹出 警告 信息 。 当 浏览 器 弹出 该 提示 信息 后 ， 其 运行 效果 
与 打开 确认 对 话 框 类 似 ， 所 有 页 面 的 加 载 及 JavaScript 脚本 的 执行 都 将 被 暂停 ， 直 到 用 户 做 出 
反应 。 

在 JavaScript 中 使 用 window.close() 方 法 关闭 当前 窗口 时 ， 如 果 当 前 窗口 是 通过 JavaScript 
打开 的 ， 则 不 会 有 提示 信息 。 在 某 些 浏览 器 中 ， 如 果 打 开 需 要 关闭 浏览 器 的 窗口 只 有 当前 一 
个 时 ， 使 用 window.close0 关 闭 窗 口 时 ， 同 样 不 会 有 提示 信息 。 

【 例 11.5】 (实例 文件 ， chll\11.5htmD 关 闭 窗口 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title>window 属性 </title> 
</head> 
<body> 
<script language="JavaScript"> 
function shutwin(){ 
window.close(); 
return;} 
</script> 
<a href="javascript:shutwin () ;"> 关 闭 本 窗口 </a> 
</body> 
</html> 


在 上 述 代码 中 ,创建 了 一 个 超级 链接 ， 并 为 超级 链接 添加 了 一 个 事件 ， 即 单 击 超级 链接 
时 ， 会 调用 函数 shutwin。 在 函数 shutwin 中 ， 使 用 了 window 对 象 的 方法 close 关闭 当前 窗口 。 

上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 11-12 所 示 。 当 单 击 超级 链接 【关闭 本 窗 
口 】 时 ， 会 弹出 一 个 对 话 框 询 问 是 否 关闭 当前 窗口 ， 如 图 11-13 所 示 。 如 果 选 择 【 是 (Y)】 则 
会 关闭 当前 窗口 ， 否 则 不 关闭 当前 窗口 。 
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11.3.3 ”案例 一 一 控制 窗口 状态 栏 


几乎 所 有 的 Web 浏览 器 都 有 状态 条 ( 栏 )， 如 果 需 要 打开 浏览 器 ， 即 使 相关 信息 在 状态 栏 
中 显示 ， 则 可 以 为 浏览 器 设置 默认 的 状态 条 信息 。Window 对 象 的 defaultStatus 属性 可 实现 该 
功能 。 其 使 用 语法 格式 如 下 : 


window.defaultStatus="statusMsg"7 


其 中 ，statusMsg 代表 了 需要 在 状态 条 显示 的 默认 信息 。 用 户 在 浏览 部 分 网 页 时 ， 如 果 发 
现 其 状态 条 会 显示 某 些 信息 ， 那 么 使 用 defaultStatus 属性 就 可 以 在 用 户 打 开 网 页 时 显示 指定 的 
信息 。 

使 用 window.defaultStatus 属性 可 以 设置 网 页 的 默认 状态 条 信息 ， 而 使 用 window.status 可 
以 动态 设置 状态 条 的 显示 信息 。 如 果 将 两 者 与 鼠标 事件 结合 ， 就 可 以 在 状态 条 显示 默认 信息 
的 同时 ， 随 着 用 户 鼠 标 改变 状态 条 的 信息 ， 以 达到 提示 用 户 操作 的 效果 。 

【 例 11.6】 (实例 文件 : chll\11.6.html) 使 用 defaultStatus 属性 与 status 属性 结合 鼠标 事件 
控制 状态 条 信息 显示 。 代 码 如 下 : 


<!DOCTYPE HTML > 

<html> 

<head> 

<title> 显 示 状态 条 信息 </title> 

<script language="JavaScript" type="text/javascript"> 
ee 

window.defaultstatus = "本 站 内 容 更 加 精彩 ! "; 

人 人 

</script> 

</head> 

<body> 
请 看 状态 条 上 显示 的 内 容 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 11-14 所 示 。 
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要 求 : 通过 单 击 页 面 中 的 某 个 按钮 ， 需 要 打开 一 个 在 屏幕 中 央 显 示 ， 大 小 为 500X400 不 
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可 变 的 新 窗口 ， 且 当 文档 大 小 大 于 窗口 大 小 时 ， 显 示 滚 动 条 。 窗 口 名 称 为 blank， 目 标 URL 
为 index.html。 
【 例 11.7】 (实例 文件 ，ch11\11.7.htmD 代 码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<head> 

<title> 打 开 新 窗口 </title> 

<script language="JavaScript" type="text/javaScript"> 
二 二 

function openWin() 


{ 


var url = "index.html"; // 指 定 URL 
var name = "blank"; // 指 定 打 开 窗 口 的 名 称 
var _feature = ""; // 打 开 窗 口 的 效果 
var left = (window.screen.width - 400) / 2; // 计 算 新 窗口 居中 时 距 屏 幕 左边 的 
距离 
var top = (window.screen.Height - 300) / 2; // 计 算 新 窗口 居中 时 距 屏幕 上 方 的 
距离 
feature += "left=" + left + ","; // 新 窗口 距离 屏幕 上 方 的 距离 
_feature += "top="” + _top + ","; // 新 窗口 距离 屏幕 左边 的 距离 
feature += "width=500,"; // 新 窗口 的 宽度 
_feature += "height=400,"; // 新 窗口 的 高 度 
feature += "resizable=0,"; // 大 小 不 可 更 改 
_feature += "scrollbars=1,"; // 滚 动 条 显示 
feature += "menubar=0,toolbar=0,status=0,1location=0,directories=0"; // 
其 他 显示 效果 
Var win = window.open( url, name, feature); 
} 
人 
</script> 
</head> 
<body> 
<form name="frmData" method="post" action="#"> 
<table width="600" align="center" border="]1" cellspacing="0"> 


<thead> 
<th colspan="3"> 网 上 购物 </th> 
</thead> 
二 下 天生 
<td valign="top" width="200"> 
<ul> 
<li><a href="#" onmouseover="return showMsg(' 主 页 ') "> 主页 
</a></1i> 
<1i><a href="#" onmouseover="return showMsg (' 简 介 ')"> 简 介 
</a></1i> 
<li><a href="#"” onmouseover="return showMsg (' 联 系 方式 ') "> 联系 方式 
</a></1i> 
<1i><a href="#"” onmouseover="return showMsg (' 业 务 介 绍 ')"> 业 务 介绍 
</a></1i> 
</ul> 
</td> 


<td valign="top" width="300"> 
上 网 购物 是 新 的 一 种 消费 理念 
</td> 


</tr> 
<tr align="center"> 
<td colspan="3" align="center"> 
<input type="button™ value=" 打 开 新 窗口 " onclick="openWin()"> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html> 


在 上 述 代 码 中 ， 使 用 了 window.open0 方 法 的 top 与 left 参数 来 设置 窗口 的 居中 显示 。 在 
了 正 9.0 浏览 器 中 上 述 文件 的 显示 效果 ， 如 图 11-15 所 示 。 在 打开 的 页 面 中 单 击 【打开 新 窗口 】 
按钮 ， 浏 览 效 果 如 图 11-16 所 示 。 


部 关口 加 WopuIN 一 一 号 


图 11-15 预览 网 页 效果 图 11-16 打开 新 窗口 的 效果 


11.5” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: JavaScript 的 对 话 框 操作 。 
练习 2: JavaScript 的 窗口 操作 。 


11.6 高 手 甜 点 


甜点 1: 如 何 实现 页 面 自 动 滚动 ? 


利用 Window 对 象 的 scroll0 方 法 可 以 指定 窗口 的 当前 位 置 ， 从 而 实现 窗口 滚动 效果 。 有 具 
体 实现 代码 如 下 : 


<script language="JavaScript"> 
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Var position = 07 
function scroller(){ 
1 (true)t 
positiont+tt+; 
scroll (0,position); 
clearTimeout (timer); 
Var timer = setTimeout ("scroller()",10); 
} 
} 
scroller (); 
</script> 


甜点 2: 如 何 设置 计时 器 效果 ? 


Window 对 象 的 setTimeoutO 方法 用 于 在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 。 例 如 下 
面 的 代码 就 是 在 实现 了 单 击 按钮 后 ， 依 次 根据 时 间 的 流逝 而 显示 不 同 内 容 的 : 


<html> 

<head> 

<script type="text/javascript"> 
function timedText () 


| 


EX Var tl=setTimeout ("document .getElementById('txt') .value='2 
2 seconds!'",2000) 
SS var 七 2=setTimeout ("document .getElementById('txt') .value='4 
N 


seconds!'",4000) 
Var t3=setTimeout ("document .getElementById('txt') .value='6 
seconds!'",6000) 
</script> 
</head> 
<body> 
<form> 
<input type="button"” value=" 显 示 计 时 的 文本 ! " onclick="timedText () "> 
<input type="text" id="txt"> 


</form> 

<p> 在 按钮 上 面 点 击 。 输 入 框 会 显示 出 已 经 流逝 的 2、4、6 秒 钟 。</p> 

</body> 

</html> 

上 述 代码 在 下 9.0 浏览 器 中 的 显示 ， 效 果 如 图 11-17 所 示 ， 当 单 击 完 按钮 后 ， 将 依次 显 
示 不 同 的 秒 数 。 


在 校 钮 上 面 点 击 。 锦 入 框 会 旦 示 出 已 经 流逝 的 2、4、6 


秒 钟 。 
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JavaScript 响应 的 操作 就 是 事件 。 事 件 将 用 户 eb 页 


< 


个 Web 网 页 中 ， 浏 览 器 可 以 通过 调用 JavaScri 
个 超 链接 ， 或 者 编辑 表单 域 中 的 内 容 时 ， 浏 览 器 就 会 调用 响应 的 JavaScript 伐 


电 ， 使 用 户 可 以 与 用 户 进行 交互 ， 以 响应 用 户 的 操 


从 
翁 


> 
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12.1 了 解 事件 与 事件 处 理 


序 动作 ， 被 称 为 事件 驱动 ， 对 事件 进行 处 理 的 程序 或 函数 ， 被 称 为 事件 处 理 程序 。 
12.1.1 事件 与 事件 处 理 概述 


JavaScript 是 基于 对 象 的 语言 ， 其 最 基本 的 特征 就 是 采用 事件 驱动 ， 使 在 图 形 界面 环境 下 
的 一 切 操作 变 得 简单 化 。 通 常 鼠 标 或 热 键 的 动作 被 称 为 事件 ， 由 鼠标 或 热 键 引发 的 一 连 串 程 


事件 由 浏览 器 动作 ， 例 如 浏览 器 载 入 文档 或 用 户 斋 击 键盘 、 深 动 鼠标 等 动作 触发 ， 而 事 


件 处 理 程序 则 说 明 一 个 对 象 如 何 响应 事件 。 在 早期 支持 JavaScript 脚本 的 浏览 器 中 ， 事 件 处 理 


程序 是 作为 HTML 标记 的 附加 属性 加 以 定义 的 ， 其 形式 如 下 : 


<input type="button" name="MyButton" value="Test Event" onclick="MyEvent () "> 


HE 


在 JavaScript 中 大 部 分 事件 的 命名 都 是 描述 性 的 ， 例 如 click、submit、mouseover 等 ， 通 
过 其 名 称 就 可 以 知道 其 含义 。 但 是 也 有 少数 事件 的 名 字 不 易 理 解 ， 例 如 blur 在 英文 中 的 含义 


是 模糊 的 ， 而 在 事件 处 理 程序 中 它 表示 的 是 一 个 域 或 者 一 个 表单 失去 焦点 。 在 一 般 情况 下 ， 
前 绥 添 加 在 事件 名 称 之 前 ， 例 如 click 事件 ， 其 处 理 器 名 为 onclick。 


事件 不 仅仅 局 限于 鼠标 和 键盘 操作 ， 也 包括 浏览 器 的 状态 的 改变 ， 例 如 绝 大 部 分 浏览 器 
支持 类 似 resize 和 load 这 样 的 事件 等 。Load 事件 在 浏览 器 载 入 文档 时 被 触发 ， 如 果 某 事件 要 
在 文档 载 入 时 被 触发 ， 一 般 应 该 在 <body> 标 记 中 加 入 语句 onload="MyFunction0"; 而 resize 
事件 只 有 在 用 户 改变 浏览 器 窗口 的 大 小 时 才 被 触发 。 当 用 户 改 变 窗 口 大 小 时 ， 有 时 需要 改变 


文档 页 面 的 内 容 布局 ， 从 而 使 其 以 恰当 、 友 好 的 方式 显示 给 用 户 。 


现代 事件 模型 中 引入 的 Event 对 象 ， 它 包含 其 他 的 对 象 使 用 的 常量 和 方法 的 集合 。 当 事 


件 发 生 后 ， 可 产生 临时 的 Event 对 象 实例 ， 而 且 还 附带 当前 事件 的 信息 ， 例 如 鼠标 定位 、 事 
件 类 型 等 ， 然 后 将 其 传递 给 相关 的 事件 处 理 器 进行 处 理 。 待 事件 处 理 完毕 后 ， 该 临时 Event 
对 象 实例 所 占据 的 内 存 空 间 将 被 释放 ， 浏 览 器 等 待 其 他 事件 的 出 现 并 进行 处 理 。 如 果 短 时 间 
内 发 生 的 事件 较 多 ， 浏 览 器 会 按 事件 发 生 的 顺序 将 这 些 事件 排序 ， 然 后 按照 排 好 的 顺序 依次 


执行 这 些 事件 。 


事件 可 以 发 生 在 很 多 场合 ， 包 括 浏览 器 本 身 的 状态 和 页 面 中 的 按钮 链接、 图片 、 层 
等 。 同 时 ， 根 据 DOM 模型 ， 文 本 也 可 以 作为 对 象 ， 并 响应 相关 的 动作 ， 例 如 点 击 鼠 标 、 文 
本 被 选择 等 。 事 件 的 处 理 方法 甚至 结果 同 浏览 器 的 环境 都 有 很 大 的 关系 ， 浏 览 器 的 版 本 越 
新 ， 所 支持 的 事件 处 理 器 就 越 多 ， 支 持 也 就 越 完善 。 所 以 在 编写 JavaScript 脚本 时 ， 只 有 充分 


考虑 浏览 器 的 兼容 性 ， 才 可 以 编写 出 适合 多 数 浏览 器 的 安全 脚本 。 
12.1.2” ”JavaScript 的 常用 事件 
JavaScript 的 鼠标 事件 如 表 12-1 所 示 。 


第 
em” DD 
表 12-1 鼠标 事件 到 
事 件 说 明 有 
ondblclick 鼠标 双击 时 触发 此 事件 加 
onmouseup 鼠标 按 下 后 松 开 鼠 标 时 触发 此 事件 加 
onmouseout 鼠标 移出 目标 的 上 方 时 触发 此 事件 | 
onmousemove 鼠标 在 目标 的 上 方 移动 时 触发 此 事件 件 
onmouseover 鼠标 移 到 目标 的 上 方 时 触发 此 事件 2 
onmousedown 按 下 鼠标 时 触发 此 事件 件 
onclick 鼠标 单 击 时 触发 此 事件 和 
JavaScript 的 键盘 事件 如 表 12-2 所 示 。 NN 
表 12-2 键盘 事件 江 
事 件 说 明 SS 
onkeypress 鼠标 双击 时 触发 此 事件 
onkeydown 鼠标 按 下 后 松 开 鼠标 时 触发 此 事件 
onkeyu 鼠标 移出 目标 的 上 方 时 触发 此 事件 


JavaScript 的 页 


事 件 
onabort 
onbeforeunload 


Onerror 


面相 关 事 件 如 表 12-3 所 示 。 
表 12-3 页 面相 关 事 件 
说 明 
图 片 在 下 载 过 程 中 被 用 户 中 断 时 触发 此 事件 


当前 页 面 的 内 容 将 要 被 改变 时 触发 的 事件 
捕 抓 当前 页 面 因为 某 种 原因 而 出 现 的 错误 ， 例 如 脚本 错误 与 外 部 数据 引用 的 错误 


onload 


页 面 内 空 完 成 传送 到 浏览 器 时 触发 的 事件 ， 包 括 外 部 文件 引入 完成 


onmove 


浏览 器 的 窗口 被 移动 时 触发 的 事件 


Onresize 


当 浏 览 器 的 窗口 大 小 被 改变 时 触发 的 事件 


onunload 


onScroll 


当前 页 面 将 被 改变 时 触发 的 事件 
浏览 器 的 滚动 条 位 置 发 生变 化 时 触发 的 事件 


onStop 浏览 器 的 停止 按钮 被 按 下 时 或 者 正在 下 载 的 文件 被 中 断 触 发 的 事件 
JavaScript 的 表单 相关 事件 如 表 12-4 所 示 。 


表 12-4 表单 相关 事件 


事 件 说 明 
onblur 某 元 素 失 去 活动 焦点 时 产生 该 事件 
onchange 当 网 页 上 某 元 素 的 内 容 发 生 改 变 时 产生 该 事件 
onfocus 网 页 上 的 元 素 获 得 焦点 时 产生 该 事件 
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续 表 
事 件 说 明 
onreset 复位 表格 时 产生 该 事件 
onsubmit 提交 表单 时 产生 该 事件 


JavaScript 的 滚动 字幕 相关 事件 如 表 12-5 所 示 。 
表 12-5 滚动 字幕 相关 事件 


在 Marquee 内 的 内 容 移动 至 Marquee 显示 范围 之 外 时 触发 的 事件 
当 Marquee 元 素 完成 需要 显示 的 内 容 后 触发 的 事件 
当 Marquee 元 素 开始 显示 内 容 时 触发 的 事件 


JavaScript 的 编辑 相关 事件 如 表 12-6 所 示 。 
表 12-6 编辑 相关 事件 


onBounce 


onFinish 


onStart 


事件 说 明 

onBeforeCopy 当 页 面 当 前 的 被 选择 内 容 将 要 复制 到 浏览 者 系统 的 剪贴 板 前 触发 的 事件 

onBeforeCut 当 页 面 中 的 一 部 分 或 者 全 部 内 容 被 移出 当前 页 面 [剪贴 ] 并 移动 到 浏览 者 的 系统 
剪贴 板 时 触发 的 事件 

onBeforeEditFocus | 当前 元 素 将 要 进入 编辑 状态 时 触发 的 事件 

onBeforePaste 当 内 容 将 要 从 浏览 者 的 系统 剪贴 板 传送 [粘贴 ] 到 页 面 中 时 触发 的 事件 

onBeforeUpdate 当 浏 览 者 粘贴 系统 剪贴 板 中 的 内 容 需 要 通知 目标 对 象 时 触发 的 事件 

onContextMenu 当 浏 览 者 按 下 鼠标 右键 出 现 菜单 时 或 者 通过 键盘 的 按键 触发 页 面 菜 单 时 触发 的 
事件 

onCopy 当 页 面 当前 的 被 选择 内 容 被 复制 后 触发 的 事件 

onCut 当 页 面 当 前 的 被 选择 内 容 被 剪 切 时 触发 的 事件 

onDrag 当 某 个 对 象 被 拖 动 时 触发 的 事件 

onDragDrop 一 个 外 部 对 象 被 鼠标 拖 进 当前 窗口 或 者 帧 

onDragEnd 当 鼠 标 拖 动 结束 时 触发 的 事件 ， 即 鼠标 的 按钮 被 释放 了 

onDragEnter 当 对 象 被 鼠标 拖 动 进 入 其 容器 范围 内 时 触发 的 事件 

onDragLeave 当 对 象 被 鼠标 拖 动 离开 其 容器 范围 内 时 触发 的 事件 

onDragOver 当 被 拖 动 的 对 象 在 另 一 对 象 容器 范围 内 拖 动 时 触发 的 事件 

onDragStart 当 某 对 象 将 被 拖 动 时 触发 的 事件 

onDrop 在 一 个 拖 动 过 程 中 ， 释 放 鼠 标 键 时 触发 的 事件 

onLoseCapture 当 元 素 失去 鼠标 移动 所 形成 的 选择 焦点 时 触发 的 事件 

onPaste 当 内 容 被 粘贴 时 触发 的 事件 

onSelect 当 文本 内 容 被 选择 时 的 事件 

onSelectStart 当 文 本 内 容 选 择 将 开始 发 生 时 触发 的 事件 
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JavaScript 的 数据 绑 定 事件 如 表 12-7 所 示 。 


表 12-7 ”数据 绑 定 事件 


站 


事 件 说 明 
onAfterUpdate 当 数 据 完成 由 数据 源 到 对 象 的 传送 时 触发 的 事件 
onDataAvailable 当 数 据 接收 完成 时 触发 事件 


onDatasetChanged 数据 在 数据 源 发 生变 化 时 触发 的 事件 


onDatasetComplete 当 来 自 数据 源 的 全 部 有 效 数据 读 取 完毕 时 触发 的 事件 


潮 诊 站 灿 闪 让 类 一 一 中 对 水 本 对 好 Z 波 中 


onErrorUpdate 当 使 用 onBeforeUpdate 事件 触发 取消 了 数据 传送 时 ， 代 蔡 onAfterUpdate 事件 
onRowEnter 当前 数据 源 的 数据 发 生变 化 并 且 有 新 的 有 效 数 据 时 触发 的 事件 

onRowExit 当前 数据 源 的 数据 将 要 发 生变 化 时 触发 的 事件 

onRowsDelete 当前 数据 记录 将 被 删除 时 触发 的 事件 

onRowsInserted 当前 数据 源 将 要 插入 新 数据 记录 时 触发 的 事件 


JavaScript 的 外 部 事件 如 表 12-8 所 示 。 


表 12-8 外 部 事件 


GG 


事 件 说 明 
onAfterPrint 当 文 档 被 打印 后 触发 的 事件 
onBeforePrint 当 文 档 即 将 被 打印 时 触发 的 事件 
onFilterChange 当 某 个 对 象 的 滤 镜 效果 发 生变 化 时 触发 的 事件 
onHelp 当 浏览 者 按 下 F1 或 者 浏览 器 的 帮助 选择 时 触发 的 事件 


onPropertyChange 当 对 象 的 属性 之 一 发 生变 化 时 触发 的 事件 
onReadyStateChange | 当 对 象 的 初始 化 属性 值 发 生变 化 时 触发 的 事件 


12.1.3 ”事件 处 理 程序 的 调用 


在 使 用 事件 处 理 程序 对 页 面 进行 操作 时 ， 最 主要 的 问题 是 如 何 通 过 对 象 的 事件 来 调用 事 


件 处 理 程序 。 通 常 ， 调 用 的 方式 主要 有 以 下 两 种 。 
1. 在 JavaScript 中 调用 


在 JavaScript 中 调用 事件 处 理 程序 ， 首 先 需要 获得 要 处 理 对 象 的 引用 ， 然 后 将 要 执行 的 处 


理 函 数 赋值 给 对 应 的 事件 。 例 如 以 下 代码 : 


<input name="bt_save" type="button"” value=" 保 存 "> 


<script language="javascript"> 


Var b_ save=document .getElementById("bt save"); 


b save.onclick=function(){ 
alert (" 单 击 了 保存 按钮 ") ; 
} 
</script> 
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在 上 述 代 码 中 ， 一 定 要 将 <input name="bt_save" type="button" value=" 保 存 "> 放 
崩 站 在 JavaSeript 代码 的 上 方 ， 否 则 将 弹出 “bsave 为 空 或 不 是 对 象 ”的 错误 提示 
上 述 实例 也 可 以 通过 以 下 代码 来 实现 : 
<input name="bt save" type="button™ value=" 保 存 "> 
<script language="javascript"> 
forml.bt_ save.onclick=function(){ 
alert (" 单 击 了 保存 按钮 ") ; 


} 
</script> 


在 JavaScript 中 指定 事件 处 理 程序 时 ， 事 件 名 称 必须 小 写 ， 否 则 程序 将 不 能 正 
疹 站 区 响应 事件 . 


2. 在 HTML 中 调用 


在 HIML 中 分 配 事件 处 理 程序 ， 只 需 在 HTML 标记 中 添加 相应 的 事件 ， 并 在 其 中 指定 要 
执行 的 代码 或 函数 名 即 可 。 例 如 以 下 代码 : 

<input name="bt save"” type="button"” value=" 保 存 ” onclick="alert('" 单 击 了 保存 按 

钮 ');"> 

上 述 实例 也 可 以 通过 以 下 代码 来 实现 : 


<input name="bt save" type="button"” value=" 保 存 " 
onclick="clickFunction();"> 
function clickFunction(){ 
alert (" 单 击 了 保存 按钮 ") ; 
} 


12.2 鼠标 键盘 事件 


鼠标 和 键盘 事件 是 页 面 操作 中 使 用 最 频繁 的 操作 ， 利 用 鼠标 事件 可 以 在 页 面 中 实现 鼠标 
移动 、 单 击 时 的 特殊 效果 ， 利 用 键盘 事件 可 以 制作 页 面 的 快捷 键 等 。 


12.2.1 案例 一 一 鼠标 的 单 击 事件 


鼠标 在 单 击 某 表 单 域 时 会 触发 onclick 事件 。 
【 例 12.1】 (实例 文件 ，ch12\12.1.html) 通 过 按钮 变换 背景 颜色 。 代 码 如 下 : 


<!IDOCTYPE> 

<html> 

<head> 
<tit1le> 通 过 按钮 变换 背景 颜 </title> 
</head> 

<body> 

<script language="javascript"> 
var Arraycolor=new 
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Array("olive", "teal","red", "blue", "maroon", "navy”r "lime", "fuschia", "green”", 
"purple", "gray”", "yellow", "aqua", "white", "silver"); 
var n=0; 
function turncolors(){ 
if (n==(Arraycolor.length-1)) n=0; 
n++? 
document .bgColor = Arraycolor[n]; 
3 
/script> 
<form name="forml" method="post" action=""> 
<p> 
<input type="button"” name="Submit"” value=" 变 换 背 景 " 
onclick="turncolors()"> 
</p> 
<p> 用 按钮 随意 变换 背景 颜色 .</p> 
</form> 
</body> 
</html> 


运行 上 述 代 码 ， 预 览 效 果 如 图 12-1 所 示 。 单 击 【 变 换 背 景 】 按 钮 ， 将 动态 地 改变 页 面 的 


背景 颜色 ， 当 用 户 再 次 单 击 该 按钮 时 ， 页 面 背景 将 以 不 同 的 颜色 进行 显示 ， 如 图 12-2 所 示 。 
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变换 背景 


用 按钮 随意 变换 背景 颜色 . 


图 12-1 预览 效果 12-2 ”改变 背景 颜色 


12.2.2 案例 一 一 鼠标 的 按 下 与 松 开 事件 


鼠标 的 按 下 与 松 开 事件 分 别 是 onmousedown 事件 和 onmouseup 事件 。 当 用 户 把 光标 放 在 


对 象 上 长 按 和 鼠标 时 会 触发 onmousedown 事件 。 例 如 在 应 用 中 ， 有 时 需要 获取 在 某 个 div 元 素 
上 鼠标 按 下 时 的 光标 位 置 (x、y 坐标 ) 并 设置 光标 的 样式 为 “ 手 型 ”。 


当 用 户 把 光标 放 在 对 象 上 鼠标 按键 被 按 下 后 再 松 开 时 会 触发 onmouseup 事件 。 如 果 接 收 


鼠标 长 按 事 件 的 对 象 与 鼠标 松 开 时 的 对 象 不 是 同一 个 对 象 ， 那 么 onmouseup 事件 将 不 会 被 触 


发 。 
后 。 


色 。 


onmousedown 事件 与 onmouseup 事件 有 先后 顺序 ， 在 同一 个 对 象 上 前 者 在 先 ， 后 者 在 
onmouseup 事件 通常 与 onmousedown 事件 共同 使 用 控制 同一 对 象 的 状态 改变 。 

【 例 12.2】 (实例 文件 : chl2\12.2.htmD) 用 事件 制作 超 链 接 文本 ， 并 改变 链接 文本 的 颜 
代码 如 下 : 

<1DOCTYPE> 


<html> 
<head> 
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<title> 用 事件 制作 超 链接 文本 </title> 
</head> 
<body> 
<form name="forml" method="post" action=""> 
<p id="pl" style="color:#AA9900 " onmousedown="mousedown()" 
onmouseup="mouseup () "><u> 鼠 标的 按 下 松 开 事件 </u></p> 
</form> 
<script language="javascript"> 
二 
function mousedown (event) 
{ 
Var e=window.event; 
Var obj=e.srcElement; 
obj .style.color="'#0022AA'; 
} 
function mouseup (event) 
Var e=window.event; 
var obj=e.srcElement; 
obj.style.color='#AA9900'; 
window.open ("", "鼠标 的 按 下 松 开 事 件 ",""); 
} 
> 
</script> 
</body> 
</html> 


运行 上 述 代码 ， 预 览 效 果 如 图 12-3 所 示 。 将 光标 放置 在 超级 链接 文本 上 并 按 下 ， 这 时 文 
本 的 颜色 会 改变 ， 如 图 12-4 所 示 。 当 在 文本 上 松 开 鼠 标 时 ， 文 本 将 恢复 默认 颜色 ， 并 弹出 一 
个 空白 页 面 ， 如 图 12-5 所 示 。 
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图 12-3 ”预览 效果 图 12-4 改变 链接 文本 的 颜色 图 12-5 弹出 空白 页 面 


12.2.3 ”案例 一 一 鼠标 的 移入 与 移出 事件 


onmouseover 事件 在 鼠标 进入 对 象 范围 ( 移 到 对 象 上 方 ) 时 触发 。onmouseout 事件 在 鼠标 离 
开 对 象 时 触发 。onmouseout 事件 通常 与 onmouseover 事件 共同 使 用 改变 对 象 的 状态 。 例 如 ， 
当 鼠 标 移 到 某 段 文字 的 上 方 时 ， 文 字 颜 色 将 显示 为 红色 ; 当 鼠 标 离开 文字 时 ， 文 字 又 会 恢复 
到 原来 的 黑色 。 其 实现 代码 如 下 : 


<font onmouseover ="this.style.color='red'™" 
onmouseout="this.style.color="black" "> 文字 颜 色 改变 </font>。 


图 


【 例 12.3】 (实例 文件 : chl2\12.3.html) 用 事件 动态 改变 图 片 的 焦点 。 代 码 如 下 : 


<!DOCTYPE > 

<html> 

<head> 

<title> 鼠标 移动 时 改变 图 片 焦点 </title> 

</head> 

<body> 

<script language="javascript"> 

二 

function visiblel(cursor,i) 

{ 

if (i==0) 

cursor.filters.alpha.opacity=100; 

else 
cursor.filters.alpha.opacity=30; 


计 出 Z 小 


et 


潮 认 看 灿 过 让 改 一 一 中 对 示 


We 
</script> 
<table border="0" cellpadding="0" cellspacing="0"> 

<tr> 

<td align="center" bgcolor="#CCCCCC"> 

<img src="01.jpg" border="0" style="filter:alpha (opacity=100)" 
onMouseOver="visible(this,1)" onMouseOut="visible(this,0)" width="150" 
height="130"> 
</td> 

</tr> 
</table> 
</body> 
</html> 


运行 上 述 代码 ， 在 正 9.0 浏览 器 中 可 以 看 到 相关 的 运行 结果 ， 当 鼠标 放置 在 图 片上 时 ， 
片 的 焦点 会 被 激活 ， 如 图 12-6 所 示 。 当 鼠标 移动 到 空白 处 时 ， 图 片 的 焦点 将 不 被 选中 ， 如 


图 12-7 所 示 。 


图 12-6 获取 图 片 焦点 图 12-7 失去 图 片 焦点 
12.2.4 ”案例 一 一 鼠标 的 移动 事件 


鼠标 移动 事件 是 鼠标 在 页 面 上 进行 移动 时 触发 事件 处 理 程序 ， 在 该 事件 中 可 以 用 


Document 对 象 事件 读 取 鼠标 在 页 面 中 的 位 置 。 


【 例 12.4】 (实例 文件 ，ch12\12.4.htmD) 用 事件 获取 鼠标 在 浏览 器 中 的 位 置 坐 标 。 代 码 如 下 : 


<!IDOCTYPE> 
<html> 
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<head> 
<title> 获 取 鼠 标 位 置 坐标 </title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
</head> 
<body> 
<script language="javascript"> 
es 
Var x=0,y=0; 
function MousePlace() 
3 
x=window.event .x; 
y=window.event.y; 
windeowsstatus= Xs ER" 4" FY 
document .onmousemove=MousePlace; 
WU 
</script> 
</body> 
</html> 


运行 上 述 代 码 ， 预 览 效 果 如 图 12-8 所 示 。 当 移动 鼠标 时 ， 状 态 栏 中 的 鼠标 坐标 数据 也 在 
改变 。 


图 12-8 ”获取 鼠标 坐标 位 置 


12.2.5 ”案例 一 一 键盘 事件 


键盘 事件 是 指 键盘 状态 的 改变 。 常 用 的 键盘 事件 有 onkeydown 按键 事件 、onkeypress 按 
键 事 件 和 onkeyup 放 开 键 事件 等 。 

(1) onkeydown 事件 。 该 事件 在 键盘 的 按键 被 按 下 时 触发 。onkeydown 事件 用 于 接收 键 
盘 的 所 有 按键 (包括 功能 键 ) 被 按 下 时 的 事件 。onkeydown 事件 与 onkeypress 事件 都 在 按键 被 按 
下 时 触发 ， 但 两 者 是 有 区 别 的 。 

例如 ， 在 用 户 输入 信息 的 界面 中 ， 经 常会 有 用 户 同 时 输入 多 条 信息 (存在 多 个 文本 框 ) 的 情 
况 出 现 。 为 方便 用 户 使 用 ， 通 常情 况 下 ， 当 用 户 按 回 车 键 时 ， 光 标 自动 跳 入 到 下 一 个 文本 
框 。 实 现 回 车 跳 入 下 一 文本 框 功 能 的 代码 如 下 : 


<input type="text" name="txtInfo" onkeydown="if (event.KkeyCode==13) 
event .keyCode=9"> 


上 述 代 码 通 过 判断 及 更 改 event 事件 的 触发 源 的 ASCII 值 ， 来 控制 光标 所 在 的 位 置 。 

(2) onkeypress 按键 事件 。onkeypress 事件 在 键盘 按键 被 按 下 时 触发 。onkeypress 事件 与 
onkeydown 事件 两 者 有 先后 顺序 ，onkeypress 事件 是 在 onkeydown 事件 之 后 发 生 的 。 此 外 ， 
当 按 下 键盘 上 的 任何 一 个 键 时 ， 都 会 触发 onkeydown 事件 ; 但 是 onkeypress 事件 只 在 按 下 键 


盘 的 任 一 字符 键 (如 A 一 Z 数字 键 ) 时 才 会 被 触发 ， 如 果 单 独 按 下 功能 键 E1 一 F12)、Ctl 键 、 
Shift 键 、Alt 键 等 ， 则 不 会 触发 onkeypress 事件 。 

(3) onkeyup 放 开 键 事件 。 该 事件 在 键盘 的 按键 被 按 下 然后 放 开 时 触发 。 例 如 ， 页 面 中 要 
求 用 户 输 入 数字 信息 时 ， 对 用 户 输 入 的 信息 的 判断 ， 使 用 的 就 是 onkeyup 事件 ， 具 体 代码 
如 下 : 


<input type="text" name="txtNum" onkeyup="if(isNaN (value) ) execCommand 
('undo');"> 


【 例 12.5】 (实例 文件 ，ch12\12.5.htmDD) 用 键盘 事件 刷新 页 面 。 代 码 如 下 : 


<!DOCTYPE> 
<html> 
<head> 
<title> 按 A 键 对 页 面 进行 刷新 </title> 
</head> 
<body> 
<script language="javascript"> 
i 
function Refurbish() 
if (window.event.keyCode==97) 


. 


location.reload(); 

} 
} 
document .onkeypress=Refurbish; 
Wf 
</script> 
<center> 
<img src="02.jpg" width="805" height="554"> 
</center> 
</body> 
</html> 


运行 上 述 代码 ， 按 下 键盘 上 的 A 键 就 可 以 实现 对 页 面 的 刷新 ， 而 无 需 用 鼠标 单 击 浏览 器 
中 的 【刷新 】 按 钮 ， 如 图 12-9 所 示 。 
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12.3 ”JavaScript 处 理事 件 的 方式 


JavaScript 脚本 处 理事 件 主要 通过 匿名 函数 、 显 式 声 明 、 手 工 触 发 等 方式 进行 ， 这 些 方式 
在 隔离 HTML 文件 结构 与 逻辑 关系 方面 的 程度 略为 不 同 。 


12.3.1 案例 一 一 匿名 函数 方式 


匿名 函数 的 方式 是 通过 Function 对 象 构造 匿名 函数 ， 并 将 其 方法 复制 给 事件 ， 这 时 匿名 
函数 就 变 成 了 该 事件 的 事件 处 理 器 。 
【 例 12.6】 (实例 文件 ,chl2\12.6.htmD) 匿 名 函数 的 实例 。 代 码 如 下 : 
<! DOCTYPE HTML > 
<html> 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>Sample Page!</title> 
</head> 
<body> 
<center> 
<br> 
<p> 通 过 匿名 函数 处 理事 件 </p> 
<form name=MyForm id=MyForm> 
<input type=button name=MyButton id=MyButton value=" 测 试 "> 
</form> 


<script language="JavaScript" type="text/javascript"> 
<!-- 


document .MyForm.MyButton.onclick=new Function() 
{ 
alert ("已 经 单 击 该 按钮 !1"); 
} 
--> 
</script> 
</center> 
</body> 
</html> 


上 述 代码 包 含 一 个 匿名 函数 ， 其 具体 内 容 如 下 : 


document .MyForm.MyButton.onclick=new Function() 
{ 
alert ("已 经 单 击 该 按钮 1") ; 


上 述 代码 的 作用 是 将 名 为 MyButton 的 button 元 素 的 click 动作 的 事件 处 理 器 设置 为 新 生 


成 的 Function 对 象 的 匿名 实例 ， 即 匿名 函数 。 本 例 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 12-10 
所 示 。 
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12.3.2 ”案例 一 一 显 式 声明 方式 


在 设置 时 间 处 理 器 时 ， 如 果 不 使 用 匿名 函数 ， 而 将 该 事件 的 处 理 器 设置 为 已 经 存在 的 函 
数 ， 那 么 当 鼠 标 移出 图 片区 域 时 ， 就 会 实现 图 片 的 转换 ， 从 而 使 图 片 播放 扩展 为 多 幅 图 片 定 
式 轮番 播放 的 广告 模式 。 其 设置 方法 是 首先 在 <head> 和 </head> 标 签 对 之 间 嵌 套 JavaScript 脚 
本 定义 两 个 函数 ， 


function MYImageRA() 
| document .all .MyPic.src="fengjingl.jpg"; 
Ds MyImageB () 
. document .all .MyPic.src="fengjing2.jpg"; 


再 通过 JavaScript 脚本 代码 将 <img> 标 记 元 素 的 mouseover 事件 的 处 理 器 设置 为 已 定义 的 
函数 MyImageA()， 将 mouseout 事件 的 处 理 器 设置 为 已 定义 的 函数 MyImageB0: 


document .al1.MYPic.onmouseover=MYImageR7 
document .all .MyPic.onmouseout=MyImageB; 


【 例 12.7】 (实例 文件 ， chl2\12.7.htmD) 图 片 翻转 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 通 过 使 用 鼠标 变换 图 片 </title> 
<script language="JavaSscript" type="text/javascript"> 
function MyImageaA() 
document .all .MyPic.src="tul.jpg"; 
function MyImageB () 
{ 
document .all .MyPic.src="tu2.jpg"; 
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一 -> 
</script> 
</head> 
<body> 
<center> 
<p> 在 图 片 内 外 移动 鼠标 ， 图 片 轮换 </p> 
<img name="MyPic" id="MyPic" src="tul.jpg" width=300 height=200></img> 
<script language="JavaScript" type="text/javascript"> 
<= 全 
document .all .MyPic.onmouseover=MyImageAa; 
document .all .MyPic.onmouseout=MyImageB; 
一 -> 
</script> 
</center> 
</body> 
</html> 


在 正 9.0 浏览 器 中 运行 上 述 代码 ， 其 显示 结果 如 图 12-11 所 示 。 当 鼠标 移动 在 图 片区 域 
时 ， 图 片 就 会 发 生变 化 ， 如 图 12-12 所 示 。 
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在 图 片 内 外 移动 鼠标 , 国 片 轮换 


图 12-11 显示 结果 图 12-12 ”变化 结果 


不 难看 出 ， 通 过 显 式 声明 的 方式 定义 事件 的 处 理 器 可 使 代码 紧凑 、 可 读 性 强 。 其 对 显 式 
声明 的 函数 没有 任何 限制 ， 还 可 以 将 该 函数 作为 其 他 事件 的 处 理 器 。 


12.3.3 ”案例 一 一 手工 触发 方式 


手工 触发 处 理事 件 的 元 素 很 简单 ， 即 通过 其 他 元 素 的 方法 来 触发 一 个 事件 而 不 需要 通过 
用 户 的 动作 来 触发 该 事件 。 如 果 某 个 对 象 的 事件 有 其 默认 的 处 理 器 ， 此 时 再 设置 该 事件 的 处 
理 器 时 ， 就 将 可 能 出 现 其 他 情况 。 

【 例 12.8】 (实例 文件 ，ch12\12.8.html) 手 动 触发 事件 。 代 码 如 下 : 


<! DOCTYPE HTML > 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 使 用 手工 触发 的 方式 处 理事 件 </title> 


<script language="JavaScript" type="text/javascript"> 
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< == 
function MyTest () 
{ 
var msg=" 通 过 不 同 的 方式 返回 不 同 的 结果 : \n\n"; 
msg+=" 单 击 【测试 】 按 钮 , 即 可 直接 提交 表单 \n"; 
msg+=" 单 击 【确定 】 按 钮 , 即 可 触发 onsubmit () 方 法 ,然后 才 提交 表单 \n"; 
alert (msg) 7 
} 
一 -> 
</script> 
</head> 
<body> 
<br> 
<center> 
<form name=MyForml] id=MyForml] onsubmit ="MyTest()" method=post 
action="haapyt .asp"> 
<input type=button value=" 测 试 " 
onclick="document .al1.MYEForml .submit ();"> 
<input type=submit value=" 确 定 "> 
</center> 
</body> 
</html> 


在 了 了 9.0 浏览 器 中 运行 上 面 的 HTML 文件 ， 其 显示 结果 如 图 12-13 所 示 。 单 击 其 中 的 
【测试 】 按 钮 ， 即 可 触发 表单 的 提交 事件 ， 并 且 直 接 将 表单 提交 给 目标 页 面 haapytasp。 如 果 
单 击 默 认 触 发 提交 事件 的 【确定 】 按 钮 ， 则 弹出 的 信息 框 如 图 12-14 所 示 。 此 时 单 击 【 确 
认 】 按 钮 ， 即 可 将 表单 提交 给 目标 页 面 haapytasp。 所 以 当 事 件 在 事实 上 已 包含 导致 事件 发 生 
的 方法 时 ， 该 方法 不 会 调用 有 问题 的 事件 处 理 器 ， 而 会 导致 与 该 方法 对 应 的 行为 发 生 。 
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单 证 【六 二 ] 按 生 了 可 直接 提交 过 单 
单 主 【注定 】 接生 周 可 触 改 oneubmit0 方 法 然 拓 才 提交 志 单 


图 12-13 显示 结果 图 12-14 单 击 【 确 定 】 按 钮 后 弹出 的 信息 框 


12.4 ”实战 演练 一 一 通过 事件 控制 文本 框 的 背景 颜色 


本 实例 是 用 户 在 选择 页 面 的 文本 框 时 ， 文 本 框 的 背景 颜色 发 生变 化 ， 如 果 选 择 其 他 文本 
框 时 ， 原 来 选择 的 文本 框 的 颜色 恢复 为 原始 状态 。 
【 例 12.9】 (实例 文件 ，ch12\12.9.html) 通 过 事件 控制 文本 框 的 背景 颜色 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 


269 舍 


JavaScript 动 态 网 站 开发 
案例 课堂 四 ~ 


<head> 
<title> 文 本 框 获得 焦点 时 改变 背景 颜色 </title> 
<meta http-equiv="Content-TYpe"” content="text/html; charset=gb2312"> 
</head> 
<script language="javascript"> 
<= 
function txtfocus (event){ 
Var e=window.event; 
Var obj=e.srcElement; 
obj.style.background="#F00066"; 
} 
function txtblur (event) { 
Var e=window.event; 
Var obj=e.srcElement; 
obj.style.background="FFFFFO"; 
} 
Wd 
</script> 
<body> 
<table align="center" width="360" height="228" border="0"> 
<tr> 
<td width="188"> 登 录 名 称 :</td> 
<td width="226"><form name="forml" method="post" action=""> 
<input type="text" name="textfield" onfocus="txtfocus()"> 
</form></td> 
</tr> 
<tr> 
<td> 密 码 :</tad> 
<td><form name="form2" method="post" action=""> 
<input type="text" name="textfield2" onfocus="txtfocus()" 
onBlur="txtblur()"> 
</form></td> 
= 
<tr> 
<td> 姓 名 :</td> 
<td><form name="form3" method="post" action=""> 
<input type="text" name="textfield3" onfocus="txtfocus()" 
onBlur="txtblur()"> 
</form></td> 
<x. 
REE> 
<tq> 性 别 :</tq> 
<td><form name="form4" method="post" action=""> 
<input type="text" name="textfield5" onfocus="txtfocus()" 
onBlur="txtblur()"> 
</form></td> 
</tr> 
<tr> 
<tq> 联 系 方式 : </td> 
<td><form name="form5" method="post" action=""> 
<input type="text" name="textfield4" onfocus="txtfocus()" 
onBlur="txtblur()"> 


</form></td> 
< /Er 
</table> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 12-15 所 示 。 选 择 文本 框 输入 内 容 时 ， 即 可 
发 现 文本 框 的 背景 色 发 生 了 变化 。 
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图 12-15 程序 运行 结果 


本 实例 主要 是 通过 获得 焦点 事件 (onfocus) 和 失去 焦点 事件 (onblur) 来 完成 。 其 中 onfocus 
事件 是 当 某 个 元 素 获得 焦点 时 发 生 的 事件 ，onblur 是 当前 元 素 失去 焦点 时 发 生 的 事件 。 


12.5” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: 鼠标 键盘 事件 的 使 用 。 
练习 2: JavaScript 处 理事 件 的 方式 。 


12.6 高 手 甜 点 


甜点 1: 如 何 检 查 浏览 器 的 版 本 ? 
使 用 Javascript 代码 可 以 轻松 地 实现 检查 浏览 器 版 本 的 目的 ， 具 体 代 码 如 下 : 


<script type="text/javascript"> 
Var browser=navigator.appName 
Var b version=navigator.appVersion 
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Var version=parseFloat (b version) 

document .write ("浏览 器 名 称 : "+ browser) 

document .write ("<br />") 

document .write ("浏览 器 版 本 : "+ version) 
</script> 


甜点 2: 如 何 格式 化 alert 弹出 窗口 的 内 容 ? 
使 用 alert 弹出 窗口 时 ， 窗 口内 容 的 显示 格式 ， 可 以 借助 转 义 字 符 进行 格式 化 。 如 果 和 希望 


窗口 内 容 按 指 定位 置换 行 ， 可 添加 转 义 字符 nm; 如 果 希 望 转 义 字符 间 有 制 表 位 间隔 ， 可 使 用 
转 义 字符 \t。 其 他 情况 请 借鉴 转 义 字符 部 分 。 
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在 网 页 中 ， 表 单 的 作用 比较 重要 ， 它 主要 负责 采集 浏览 者 的 相关 数据 。 例 如 常 


1 
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型 。 这 些 新 特性 提供 了 更 好 的 输入 控制 和 验证 。 本 章 主 要 讲述 表单 的 基本 元 素 的 使 


用 方法 和 表单 的 高 级 元 素 的 使 用 方法 ， 最 后 结合 综合 案例 ， 进 一 步 讲 述 表 单 的 综合 


实用 技巧 。 
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13.1 案例 一 一 表单 概述 


表单 主要 用 于 收集 网 页 上 浏览 者 的 相关 信息 。 其 标签 格式 为 “<form>.….</form>”。 表 单 
的 基本 语法 格式 如 下 : 


<form action="url" method="get|post" enctype="mime"> 
</form > 


其 中 ，action=url 用 来 指定 处 理 提交 表单 的 格式 ， 它 可 以 是 一 个 URL 地 址 ， 也 可 以 是 一 
个 电子 邮件 地 址 。method=get 或 post 用 来 指明 提交 表单 的 HTTP 方法 。enctype=cdata 用 来 指 
明 把 表单 提交 给 服务 器 时 的 互联 网 媒体 形式 。 
\ 表单 是 一 个 能 够 包含 表单 元 素 的 区 域 。 通 过 添加 不 同 的 表单 元 素 ， 将 显示 不 同 的 效果 。 
Wy 【 例 13.1】 (实例 文件 : ch13\13.1.htmD) 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

下 面 是 输入 用 户 登 录 信 息 

<br> 

用 户 名 称 

<input type="text" name="user"> 
<br> 

用 户 密码 

<input type="password" name="password"> 
<br> 

<input type="submit"” value=" 登 录 "> 
</form> 

</body> 

</html> 


在 正 9.0 浏览 器 中 的 显示 效果 如 图 13-1 所 示 ， 可 以 看 到 用 户 登录 的 信息 页 面 。 
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图 13-1 用 户 登录 窗口 


13.2 表单 基本 元 素 的 使 用 


表单 元 素 是 能 够 让 用 户 在 表单 中 输入 信息 的 元 素 。 常 见 的 有 文本 框 、 密 码 框 、 下 拉 菜 
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单 、 单 选 框 、 复 选 框 等 。 本 节 主 要 讲述 表单 基本 元 素 的 使 用 方法 和 技巧 。 
13.2.1 案例 一 一 单行 文本 输入 框 


文本 框 是 一 种 让 访问 者 自己 输入 内 容 的 表单 对 象 ， 通 常 被 用 来 填写 单个 字符 ， 例 如 用 户 
姓名 和 地 址 等 。 其 代码 格式 如 下 : 


<input type="text" name="..." size="..." maxlength="..." value="..."> 


其 中 ，type="text" 定 义 单行 文本 输入 框 ， name 属性 定义 文本 框 的 名 称 ， 要 保证 数据 的 准 
确 采 集 ， 必 须 定 义 一 个 独一无二 的 名 称 ; size 属性 定义 文本 框 的 宽度 ， 单 位 是 单个 字符 宽 
度 ; maxlength 属性 定义 最 多 输入 的 字符 数 ，value 属性 定义 文本 框 的 初始 值 。 

【 例 13.2】 (实例 文件 ，ch13\13.2.htmD 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head><title> 输 入 用 户 的 姓名 </title></head> 

<body> 

<form> 

请 输入 您 的 姓名 : 

<input type="text" name="yourname" size="20" maxlength="15"> 
请 输入 您 的 地 址 : 

<input type="text" name="youradr" size="20" maxlength="15"> 
</form> 

</body> 

</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 13-2 所 示 ， 可 以 看 到 窗口 显示 的 是 两 个 单行 
文本 输入 框 。 
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图 13-2 单行 文本 输入 框 
13.2.2 ”案例 一 一 多 行文 本 输入 框 
多 行 输入 框 (textarea) 主 要 用 于 输入 较 长 的 文本 信息 。 其 代码 格式 如 下 : 


“COLs=". se" TOWS=".02" WrapD=" "></tertarea > 


其 中 ，name 属性 定义 多 行文 本 框 的 名 称 ， 要 保证 数据 的 准确 采集 ， 必 须 定义 一 个 独 一 无 
二 的 名 称 ; cols 属性 定义 多 行文 本 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; rows 属性 定义 多 行文 本 


<textarea name=".. 
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框 的 高 度 ， 单 位 是 单个 字符 宽度 ; wrap 属性 定义 输入 内 容 大 于 文本 域 时 显示 的 方式 。 
【 例 13.3】 (实例 文件 ，ch13\13.3.htmD 代 码 如 下 : 


<!DOCTYPE html> 

<html> 
<head><title> 多 行文 本 输入 </title></head> 
<body> 

<form> 

请 输入 您 最 新 的 工作 情况 <br> 

<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 13-3 所 示 ， 可 以 看 到 窗口 显示 的 是 一 个 多 行 
文本 输入 框 。 
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请 输入 您 最 新 的 工作 情况 


图 13-3 多 行文 本 输入 框 
13.2.3 ”案例 一 一 密码 域 


密码 输入 框 是 一 种 特殊 的 文本 域 ， 主 要 用 于 输入 一 些 保密 信息 。 当 网 页 浏览 者 输入 文本 
时 ， 页 面 会 显示 黑 点 或 者 其 他 符号 ， 这 样 就 增加 了 输入 文本 的 安全 性 。 其 代码 格式 如 下 : 


<input type="password" name="..." size="..." maxlength="..."> 


其 中 type="password" 定 义 密码 框 ， name 属性 定义 密码 框 的 名 称 ， 要 保证 唯一 性 ，size 属 
性 定义 密码 框 的 宽度 ， 单 位 是 单个 字符 宽度 ，maxlength 属性 定义 最 多 输入 的 字符 数 。 
【 例 13.4】 (实例 文件 :chl3\13.4.htmD 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head><title> 输 入 用 户 姓 名 和 密码 </title></head> 
<body> 

<form > 

用 户 姓名 : 

<input type="text" name="yourname"> 

<br> 


登录 密码 : 
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<input type="password" name="yourpw"><br> 
</form> 
</body> 
</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 13-4 所 示 ， 当 用 户 在 输入 密码 时 可 以 看 到 密码 以 
黑 点 的 形式 显示 。 
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13-4 ”密码 输入 框 
13.2.4 ”案例 一 一 单 选 按钮 
单 选 按钮 是 指 网 页 浏览 者 在 一 组 选项 里 只 能 选择 一 个 的 按钮 。 其 代码 格式 如 下 : 


<input type="radio" name=" ..." Value = "..."> 


其 中 type="radio" 定 义 单 选 按钮 ，name 属性 定义 单 选 按钮 的 名 称 ( 单 选 按钮 都 是 以 组 为 单 
位 使 用 的 ， 在 同一 组 中 的 单 选项 都 必须 用 同一 个 名 称 )，value 属性 定义 单 选 按钮 的 值 ， 在 同一 
组 中 ， 它 们 的 域 值 必须 是 不 同 的 。 

【 例 13.5】 (实例 文件 ，ch13\13.5.htmD) 实 现代 码 如 下 : 


<!DOCTYPE html> 


<html> 

<head><title> 选 择 感 兴趣 的 图 书 </title></head> 

<body> 

<form > 

请 选择 您 感 兴趣 的 图 书 类 型 : 

<br> 

<input type="radio" name="book" value = "Bookl"> 网 站 编程 <br> 
<input type="radio" name="book" value = "Book2"> 办 公 软 件 <br> 
<input type="radio" name="book" value = "Book3"> 设 计 软 件 <br> 
<input type="radio" name="book" value = "Book4"> 网 络 管理 <br> 
<input type="radio" name="book" value = "Book5"> 黑 客 攻防 <br> 
</form> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 13-5 所 示 。 从 中 可 以 看 到 有 5 个 单 选 按 钮 ， 
但 用 户 只 能 选择 其 中 一 个 按钮 。 
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图 13-5 ” 单 选 按钮 显示 效果 
13.2.5 ”案例 一 一 复 选 框 


复 选 框 可 使 网 页 浏览 者 在 一 组 选项 里 同时 选择 多 个 选项 。 每 个 复 选 框 都 是 一 个 独立 的 元 
素 ， 都 必须 有 一 个 唯一 的 名 称 。 其 代码 格式 如 下 : 


<input type="checkbox" name="..." Value ="..."> 


| 其 中 type="checkbox" 定 义 复 选 框 ，name 属性 定义 复 选 框 的 名 称 ， 在 同一 组 中 的 复 选 框 都 
Ne 必须 用 同一 个 名 称 ; value 属性 定义 复 选 框 的 值 。 
SN 【 例 13.6】 (实例 文件 ，ch13\13.6.htmD) 实 现代 码 如 下 : 


<!DOCTYPE html> 
<html> 

<head><title> 选 择 感 兴趣 的 图 书 </title></head> 
<body> 

<form > 


请 选择 您 感 兴趣 的 图 书 类 型 : <br> 


<input type="checkbox" name="book" value = "Book1"> 网 站 编程 <br> 
<input type="checkbox" name="book" value = "Book2"> 办 公 软 件 <br> 
<input type="checkbox" name="book" value = "Book3"> 设 计 软 件 <br> 
<input type="checkbox" name="book" value = "Book4"> 网 络 管 理 <br> 


<input type="checkbox" name="book" value "Book5"” checked> 黑 客 攻防 <br> 


</form> 
</body> 
</html> 


| 
A checked 属性 主要 用 于 设置 默认 选中 的 项 。 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 13-6 所 示 。 从 中 可 以 看 到 有 5 个 复 选 框 ， 其 
中 【黑客 攻防 】 复 选 框 已 被 默认 选中 。 


13-6 ” 复 选 框 的 效果 
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13.2.6 ”案例 一 一 下 拉 选 择 框 


下 拉 选 择 框 主要 用 于 在 有 限 的 空间 里 设置 多 个 选项 。 下 拉 选 择 框 既 可 以 用 做 单 选 ， 也 可 
以 用 做 复 选 。 其 代码 格式 如 下 : 


<select name=",.。." Size="。.." multiple> 
<option value="..." selected> 


二 下 

ee 

其 中 ，size 属性 定义 下 拉 选 择 框 的 行 数 ，name 属性 定义 下 拉 选 择 框 的 名 称 ，multiple 属 
性 表示 可 以 多 选 ， 如 果 不 设置 本 属性 ， 那 么 只 能 单 选 ，value 属性 定义 选择 项 的 值 ，selected 
属性 表示 默认 已 经 选择 本 选项 。 

【 例 13.7】 (实例 文件 ，ch13\13.7.htmD) 实 现下 拉 选 择 框 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 
<head><title> 选 择 感 兴趣 的 图 书 </title></head> 
<body> 

<form> 

请 选择 您 感 兴趣 的 图 书 类 型 :<br> 

<select name="fruit" size = "3" multiple> 
<option value="Book1"> 网 站 编程 

<option value="Book2"> 办 公 软 件 

<option value="Book3"> 设 计 软 件 

<option value="Book4"> 网 络 管理 

<option value="Book5"> 黑 客 攻防 

</select> 

</form> 

</body> 

</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 13-7 所 示 ， 即 可 看 到 下 拉 选 择 框 ， 其 中 显示 
为 3 行 选项 ， 用 户 可 以 按 住 Ctrl 键 ， 选 择 多 个 选项 。 
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图 13-7 下 拉 选 择 框 的 效果 
13.2.7 ”案例 一 一 普通 按钮 
普通 按钮 用 来 控制 其 他 定义 了 处 理 脚本 的 处 理工 作 。 其 代码 格式 如 下 : 


浏 让 元 洒 普 性 潭 一 过 回 合 卫 班 灯 司 六。 册 E 小 鲁 
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<input type="button" name="..." value="..." onClick="..."> 


其 中 ，type="button" 定 义 普通 按钮 ，name 属性 定义 普通 按钮 的 名 称 ，value 属性 定义 按钮 
的 显示 文字 ; onClick 属性 表示 单 击 行为 或 其 他 的 事件 ， 通 过 指定 脚本 函数 来 定义 按钮 的 
行为 。 

【 例 13.8】 (实例 文件 ，ch13\13.8.htmD 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

点 击 下 面 的 按钮 ， 把 文本 框 1 的 内 容 拷贝 到 文本 框 2 中 : 

<br/> 

文本 框 1: <input type="text"” id="fieldl" value=" 学 习 HTML 的 技巧 "> 
<br/> 

文本 框 2 : <input type="text" id="field2"> 

<br/> 

<input type="button"”name=". .."” value=" 单 击 我 " 
onClick="document .getElementById('field2') .value=document .getElementById('f 
ieldl') .value"> 

</form> 

</body> 

</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 13-8 所 示 ， 单 击 【 单 击 我 】 按 钮 ， 即 可 实现 
将 文本 框 中 内 容 复制 到 文本 框 2 中 。 


Ke DD cvsersynocac ~ OX 


文员 将， 坦 看 忆 态 sxA)， 工具 T 


| 点 击 下 面 的 玉 乌 ， 扫 文 林 柱 1 的 内 “ 
容 搓 由 到 文本 杠 2 中 ， 


文本 框 ] : 学 习 HTIL56 技 巧 
文本 框 2: 字 习 668 入 瑟 


图 13-8 ” 单 击 按钮 后 的 复制 效果 
13.2.8 ”案例 一 一 提交 按钮 
提交 按钮 用 来 将 输入 的 信息 提交 到 服务 器 。 其 代码 格式 如 下 : 


<input type="submit" name="..." value="..."> 


其 中 ，type="submit" 定 义 提交 按钮 ，name 属性 定义 提交 按钮 的 名 称 ，value 属性 定义 按钮 
的 显示 文字 。 通 过 提交 按钮 可 以 将 表单 里 的 信息 提交 给 表单 中 的 action 所 指向 的 文件 。 
【 例 13.9】 (实例 文件 : ch13\13.9.htmlD) 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head><title> 输 入 用 户 名 信息 </title></head> 
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<body> 

<form action="http://www.yinhangit.com/yonghu.asp" method="get"> 
请 输入 你 的 姓名 : 

<input type="text" name="yourname"> 
<br> 

请 输入 你 的 住址 : 

<input type="text" name="youradr"> 
<br> 

请 输入 你 的 单位 : 

<input type="text" name="yourcom"> 
<br> 

请 输入 你 的 联系 方式 : 

<input type="text" name="yourcom"> 
<br> 

<input type="submit"” value=" 提 交 "> 
</form> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 13-9 所 示 ， 输 入 内 容 后 单 击 【 提 交 】 按 钮 ， 
即 可 实现 将 表单 中 的 数据 发 送 到 制定 的 文件 。 


测 时 | 乙 祈 震 己 洲 一 一 妾 回 司 卫 漠 由 副 河山 81 涛 名 
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文件 内 坊 吕 (和 三 看 V) 家 到 天 A】 工具 (可 二 (H) 


请 输入 你 的 姓名 ， | 
请 输入 你 的 住址 ， 
请 输入 你 的 单位 ， 
请 输入 你 的 联系 方式 , 


图 13-9 提交 按钮 
13.2.9 ”案例 一 一 重 置 按钮 
复位 按钮 用 来 重 置 表单 中 输入 的 信息 。 其 代码 格式 如 下 : 


<input type="reset" name="..." value="..."> 


其 中 ，type="reset" 定 义 复位 按钮 ， name 属性 定义 复位 按钮 的 名 称 ，value 属性 定义 按钮 
的 显示 文字 。 
【 例 13.10】 (实例 文件 : ch13\13.10.htm]) 实 现 重 置 按钮 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 

<body> 

<form> 

请 输入 用 户 名 称 : 

<input type='text'> 
<br/> 

请 输入 用 户 密码 : 


<input type='password'> 
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<br> 

<input type="submit" value=" 登 录 "> 
<input type="reset" value=" 重 置 "> 
</form> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 13-10 所 示 ， 输 入 内 容 后 单 击 【 重 置 】 按 


， 即 可 实现 将 表单 中 的 数据 清空 的 目的 。 


请 输入 用 户 名 称 ， 


请 输入 用 户 密码 ， 
本 本 


图 13-10 重 置 按钮 


13.3 ”表单 高 级 元 素 的 使 用 


除了 上 述 基 本 元 素 外 ，HTML 中 还 有 一 些 高 级 元 素 。 例 如 url、eamil、time、range、 


search 等 。 对 于 这 些 高 级 元 素 的 属性 ，IE 9.0 浏览 器 暂 不 支持 ， 本 节 将 使 用 Opera 13.60 浏览 


器 查 


看 其 显示 效果 。 


13.3.1 案例 一 一 url 属性 


url 属性 用 于 说 明 网 站 的 网 址 。 在 提交 表单 时 ， 会 自动 验证 url 的 值 。 其 代码 格式 如 下 : 


<input type="url" name="userurl"/> 


另外 ， 用 户 可 以 使 用 普通 属性 设置 ml 输入 框 ， 例 如 使 用 max 属性 设置 其 最 大 值 、 使 用 


min 属性 设置 其 最 小 值 、 使 用 step 属性 设置 合法 的 数字 间隔 、 使 用 value 属性 规定 其 默认 值 。 


【 例 13.11】 (实例 文件 : ch13\13.11.htmD) 实 现 ul 属性。 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

请 输入 网 址 : 

<input type="url" name="userurl"/> 
</form> 

</body> 

</html> 


上 述 代码 在 Opera 11.60 浏览 器 中 的 显示 效果 如 图 13-11 所 示 ， 用 户 即 可 输入 相应 的 


13-11 ”url 属性 的 效果 


13.3.2 ”案例 一 一 eamil 属性 


与 url 属性 类 似 ，email 属性 用 于 浏览 者 输入 e-mail 地 址 。 在 提交 表单 时 ， 会 自动 验证 
email 域 的 值 。 其 代码 格式 如 下 : 


<input type="email" name="user email"/> 


【 例 13.12】 (实例 文件 : ch13\13.12.htmD) 实 现 e-mail 属性 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

请 输入 您 的 邮箱 地 址 : 

<input type="email" name="user email"/> 
<br> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


上 述 代码 在 Opera 11.60 浏览 器 中 的 显示 效果 如 图 13-12 所 示 ， 用 户 可 在 其 中 输入 相应 的 
邮箱 地 址 。 如 果 用 户 输入 的 邮箱 地 址 不 合法 ， 单 击 【 提 交 】 按 钮 后 会 弹出 图 中 “请 输入 一 个 


13-12 ”eamil 属性 的 效果 
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13.3.3 ”案例 一 一 date 和 time 


在 HTML 中 ， 新 增 了 一 些 日 期 和 时 间 输 入 类 型 ， 包 括 date、datetime、datetime-local、 
month、week 和 time。 它 们 的 具体 含义 如 表 13-1 所 示 。 


表 13-1 日 期 和 时 间 输 入 类 型 


属 性 含义 
i 用 于 选取 日 、 月 、 年 

month 用 于 选取 月 、 年 

| 用 于 选取 周 和 年 


用 于 选取 时 间 
datetime 用 于 选取 时 间 、 日 、 月 、 年 


datetime-local 用 于 选取 时 间 、 日 、 月 、 年 (本 地 时 间 ) 
上 述 属性 的 代码 格式 类 似 ， 例 如 以 date 属性 为 例 ， 代 码 格式 如 下 : 


<input type="date" name="user date" /> 


【 例 13.13】 (实例 文件 : ch13\13.13.htmD 实 现 date 属性 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<body> 
<form> 
<br/> 
请 选择 购买 商品 的 日 期 : 
<br> 
<input type="date" name="user date" /> 
</form> 
</body> 
</html> 


上 述 代码 在 Opera 11.6 浏览 器 中 的 显示 效果 如 图 13-13 所 示 。 当 用 户 单 击 输入 框 中 的 向 
下 三 角 按 钮 时 ， 即 可 在 弹出 的 窗口 中 选择 需要 的 日 期 。 


Wy oper: | 
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13-13 ”date 属性 的 效果 
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13.3.4 “案例 一 -number 属性 


number 属性 提供 了 一 个 输入 数字 的 输入 类 型 。 用 户 可 以 直接 在 文本 框 中 输入 数字 、 或 者 
通过 单 击 微调 框 中 的 向 上 或 者 向 下 三 角 按钮 选择 数字 。 其 代码 格式 如 下 : 

<input type="number" name="shuzi" /> 

【 例 13.14】 (实例 文件 ，ch13\13.14.htmD) 实 现 number 属性 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

此 网 站 我 曾经 来 

<input type="number"” name="shuzi "/> 次 了 哦 ! 
</form> 

</body> 

</html> 


上 述 代码 在 Opera 11.6 浏览 器 中 的 显示 效果 如 图 13-14 所 示 。 
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图 13-14 number 属性 的 效果 


= 
ee 强烈 建议 用 户 使 用 min 和 max 属性 规定 输入 的 最 小 值 和 最 大 值 。 


13.3.5 “案例 一 一 range 属性 


Range 属性 用 于 显示 一 个 滚动 的 控件 。 和 number 属性 一 样 ， 用 户 可 以 使 用 max、min 和 
step 属性 控制 控件 的 滚动 范围 。 代 码 格式 如 下 : 


<input type="range" name="..." min="..." max="..." /> 


其 中 min 和 max 分 别 控制 滚动 控件 的 最 小 值 和 最 大 值 。 
【 例 13.15】 (实例 文件 ，ch13\13.15.htmD) 实 现 range 属性 。 代 码 如 下 : 


<!1DOCTYPE html> 
<html> 
<body> 
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<form> 

<br/> 

英语 成 绩 公布 了 ! 我 的 成 绩 名 名 次 为 : 

<input type="range" name="ran" min="1" max="10" /> 
</form> 

</body> 

</html> 


上 述 代码 在 Opera 11.6 浏览 器 中 的 显示 效果 如 图 13-15 所 示 ， 用 户 可 以 拖 电 滑 块 ， 选 择 
合适 的 数字 。 


Wfiey/oc. x | bfiey/oc.. x | 
D0- | 加 本 地 | localho 太 | 


英语 成 绩 公 布 了 ! 我 的 成 绩 名 名 次 为 ， 


图 13-15 range 属性 的 效果 


Se 默认 情况 下 ， 滑 块 位 于 滚珠 的 中 间 位 置 。 如 果 用 户 指定 的 最 大 值 小 于 最 小 
寺 值 ， 则 允许 使 用 反 向 滚动 轴 。 目 前 浏览 器 对 这 一 属性 还 不 能 很 好 地 支持 。 


13.3.6 “案例 一 一 required 属性 


required 属性 规定 必须 在 提交 之 前 填写 输入 域 (不 能 为 空 )。required 属性 适用 于 以 下 类 型 
的 输入 属性 : text、search、url、email、password、date、pickers、number、checkbox、 
radio 等 。 
【 例 13.16】 (实例 文件 ，ch13\13.16.htmD) 实 现 required 属性 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

下 面 是 输入 用 户 登 录 信 息 

<br> 

用 户 名 称 

<input type="text" name="user" required="required"> 
<br> 

用 户 密码 

<input type="password" name="password" required="required"> 
<br> 

<input type="submit" value=" 登 录 "> 

</form> 
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</body> 

</html> 

上 述 代 码 在 Opera 11.6 浏览 器 中 的 显示 效果 如 图 13-16 所 示 。 如 果 用 户 只 输入 了 密码 ， 
而 没有 输入 “用 户 名 称 ”， 那 么 在 单 击 【 登 录 】 按钮 时 ， 将 弹出 “必须 填写 ”提醒 信息 。 
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图 13-16 ”required 属性 的 效果 


13.4 ”表单 对 象 在 javascript 中 的 应 用 


表单 ， 在 网 页 中 的 作用 不 可 小 视 ， 它 主要 负责 数据 采集 ， 例 如 对 访问 者 的 名 字 和 E-mail 
地 址 、 调 查 表 、 留 言 簿 等 的 采集 。 一 个 表单 有 表单 标签 (包含 了 处 理 表单 数据 所 用 CGI 程序 的 
URL 以 及 数据 提交 到 服务 器 的 方法 )、 表 单 域 (包含 了 文本 框 、 密 码 框 、 隐 藏 域 、 多 行文 本 
框 、 复 选 框 、 单 选 框 、 下 拉 选 择 框 和 文件 上 传 框 等 )、 表 单 按钮 (包括 提交 按钮 、 复 位 按钮 和 一 
般 按钮 ， 用 于 将 数据 传送 到 服务 器 上 的 CGI 脚本 或 取消 输入 ， 还 可 以 用 表单 按钮 来 控制 其 他 
定义 了 处 理 脚 本 的 处 理工 作 ) 等 3 个 基本 组 成 部 分 。 


13.4.1 ”案例 一 一 HTML 表单 基础 


表单 是 HTML 语言 最 有 用 的 功能 ， 向 表单 添加 JavaScript 脚本 ， 可 以 增加 表单 的 交互 
性 ， 并 可 提供 大 量 有 用 的 特性 。 


1. 定义 表单 
在 HIML 中 ， 表 单 是 客户 端 与 服务 器 进行 数据 传输 的 一 种 工具 ， 其 作用 是 收集 客户 端的 


信息 ， 并 且 允 许 客户 端的 用 户 以 标准 格式 向 服务 器 提交 数据 。 在 HTML 中 ， 表 单 内容 全 部 在 
<form> 标 签 中 。 其 语法 格式 如 下 : 


<form name="frmName™" 
[ method="get|post"] 
action="frmAction™" 
[ target=" blank| parent | selfl top"] 
[enctype="text/plain|application/x-www-form-urlencoded|multipart/form- 
data"]> 
表单 域内 容 


</form> 
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<form> 对 象 的 属性 有 以 下 几 种 。 

(1) name: 虽然 在 不 命名 的 情况 下 也 可 以 使 用 表单 ， 但 是 为 了 方便 在 JavaScript 中 使 用 
表单 ， 需 要 为 其 指定 一 个 名 称 。 

(2) method: 是 一 个 可 选 的 属性 ， 用 于 指定 form 提交 (把 客户 端 表单 的 信息 发 送 给 服务 
器 的 动作 被 称 为 “提交 ”) 的 方法 。 表 单 提交 的 方法 有 get 和 post 两 种 。 如 果 用 户 不 指定 form 
的 提交 方法 ， 则 默认 的 提交 方法 是 post。 


| 使 用 get 方法 提交 表单 需要 注意 : URL 的 长 度 应 限制 在 8192 个 字符 以 内 。 如 
汇 果 发 送 的 数据 量 太 大 ， 数 据 将 被 截断 ， 从 而 导致 意外 或 失败 的 处 理 结 果 。 因 此 ， 
如 果 传 输 的 数据 量 过 大 ， 提 交 form 时 不 能 使 用 get 方法 。 


(3) action: 用 于 指定 表单 的 处 理 程序 的 URL 地 址 。 其 内 容 可 以 说 是 某 个 处 理 程序 或 页 
面 (还 可 以 使 用 # 代 蔡 action 的 值 ， 指 明 当前 form 的 action 就 是 其 本 身 )， 但 是 需要 注意 到 是 
action 属性 的 值 ， 必 须 包 含 具体 的 网 络 路 径 。 例 如 ， 指 定 当 前 页 面 action 为 check 下 的 
userCheck.html。 其 方法 如 下 : 


<form action="/check/userCheck.html"> 


另外 ， 用 户 使 用 JavaScript 等 脚本 语言 ， 可 以 按照 需要 指定 form 的 action 值 。 例 如 ， 使 
用 JavaScript 指定 action 的 值 为 /check/userCheck.htm。 其 方法 如 下 : 


document .loginForm.action="/check/userCheck.html" 


(4) target 属性 用 于 指定 当前 form 提交 后 ， 目 标 文档 的 显示 方法 。target 属性 是 可 选 的 ， 
它 有 4 个 值 。 如 果 用 户 没有 指定 target 属性 的 值 ， 那 么 系统 会 默认 target 的 值 为 _self。 

e@  _blank: 在 未 命名 的 新 窗口 中 打开 目标 文档 。 

e  _parent; 在 显示 当前 文档 的 窗口 的 父 窗口 中 打开 目标 文档 。 

e@ self: 在 提交 表单 所 使 用 的 窗口 中 打开 目标 文档 。 

e@ top: 在 当前 窗口 内 打开 目标 文档 ， 确 保 目标 文档 占用 整个 窗口 。 

(5) enctype 属性 的 作用 是 指定 form 提交 时 的 编码 方式 。entype 默认 的 编码 方式 是 
application/x-www-form-urlencoded。 如 果 需 要 在 提交 form 时 上 传 文件 ，entype 的 值 必须 是 
multipart/form-data。enctype 的 值 有 以 下 3 种 。 

e@ text/plain: 纯 文本 编码 。 

® application/x-www-form-urlencoded: URL 编码 。 

e@ mnultipart/form-data: MIME 编码 。 

(6) element[]: 包含 所 有 为 目标 form 元 素 对 象 所 引入 的 用 户 界面 元 素 形成 数组 (按钮 、 单 
选 按钮 )， 且 数组 元 素 的 下 标 按 元 素 载 入 顺序 分 配 。 

(7) encoding 是 表单 的 MIME 类 型 ， 用 enctype 属性 定义 。 在 一 般 情况 下 ， 该 属性 是 不 必 
要 的 。 

另外 ，form 对 象 有 SubmitO0 和 ResetO 两 个 方法 ， 通 过 这 两 个 方法 可 以 提交 数据 或 重 置 表 
单 ， 而 不 需要 用 户 单 击 某 个 按钮 。 

(8) reset()。reset0 方 法 会 将 表单 中 所 有 元 素 值 重 新 设置 为 缺 省 状态 ， 如 果 在 表单 中 定义 


了 Reset 按钮 ， 则 reset0 方 法 执行 后 的 效果 与 单 击 Reset 按钮 的 效果 相同 。 
(9) submitO) 。submit0 方 法 会 将 表单 数据 发 送 给 服务 器 的 程序 处 理 ， 如 果 在 表单 中 定义 
了 Submit 按钮 ， 则 submit() 方 法 执行 后 的 效果 与 单 击 Submit 按钮 的 效果 相同 。 


Se 如 果 使 用 submit() 方 法 向 服务 器 发 送 数据 或 者 通过 电子 邮件 发 送 数据 ， 多 数 
对 浏览 器 会 提示 用 户 是 否 核实 提交 的 信息 。 如 果 用 户 选 择 取消 发 送 ， 那 么 就 再 也 无 
法 使 用 该 方法 发 送 了 信息 了 。 


2. 在 JavaScript 中 访问 Form 对 象 


一 个 表单 隶属 于 一 个 文档 ， 对 于 表单 对 象 的 引用 可 以 通过 使 用 隶属 文档 的 表单 数组 进行 
引用 ， 即 使 在 只 有 一 个 表单 的 文档 中 ， 表 单 也 是 一 个 数组 的 元 素 。 在 JavaScript 中 对 表单 引用 
的 条 件 是 : 必须 先 在 页 面 中 用 标识 创建 表单 ， 并 将 定义 表单 部 分 放 在 引用 之 前 。 

在 JavaScript 中 访问 表单 对 象 可 用 以 下 两 种 方法 实现 。 

(1) 直接 访问 表单 。 在 表单 对 象 的 属性 中 首先 必须 指定 其 表单 名 ， 然 后 通过 下 列 标识 访 
问 表单 即 可 。 例 如 : document.myform。 

(2) 通过 数组 来 访问 表单 。 除 了 使 用 表单 名 来 访问 表单 外 ， 还 可 以 使 用 表单 对 象 数 组 访 
问 表单 对 象 。 但 因 表单 对 象 是 由 浏览 器 环境 提供 的 ， 而 浏览 器 环境 所 提供 的 数组 下 标 是 0 到 
n， 所 以 可 通过 下 列 格式 实现 表单 对 象 的 访问 。 

document .forms [0] 


document .forms [1] 
document .forms [2] 


3. 表单 数据 的 传递 

在 实际 应 用 中 ， 在 提交 表单 数据 之 前 ， 经 常 需要 使 用 JavaScript 脚本 验证 用 户 输 入 的 信息 
是 否 合法 或 者 对 某 个 字段 进行 转换 、 运 算 等 操作 ， 均 涉及 表单 数据 如 何 传递 给 处 理 函 数 的 问 
题 。 表 单传 递 的 方法 一 般 要 遵循 以 下 几 条 原则 。 

@ ” 当 函 数 需要 访问 表单 中 多 于 一 个 的 表单 对 象 时 ， 传 递 整个 form 元 素 对 象 。 

® ” 当 函 数 需要 访问 表单 中 某 个 特定 的 表单 元 素 对 象 时 ， 传 递 整个 表单 控件 对 象 。 

® ” 当 函 数 只 需 访问 表单 中 特定 的 表单 元 素 对 象 的 某 个 属性 时 ， 传 递 该 属性 值 的 引用 。 

在 表单 数据 传递 方法 选取 的 问题 上 ， 具 体 使 用 哪 一 种 方法 进行 数据 传递 完全 取决 于 页 面 
的 实际 需要 ， 但 总 的 原则 在 于 选择 最 短 的 引用 路 径 ， 以 避免 编写 不 必要 的 JavaScript 代码 。 在 
遵循 上 述 原则 的 基础 上 ， 可 以 使 用 以 下 3 种 方法 进行 表单 数据 的 传递 。 

(1) 完全 引用 法 。 

该 方法 是 一 种 比较 传统 的 方法 ， 即 使 用 全 局 引用 的 方法 来 操作 目标 表单 中 的 特定 表单 元 
素 。 若 使 用 此 种 方法 ， 则 无 需 给 处 理 函 数 传递 任何 与 表单 相关 的 参数 。 

在 文档 中 表单 的 定义 如 下 : 


<form name="Forml" id=" Forml" > 

<input type="text" name="Textl1l" id="Textl]l" value="Default Value" 
onchange="CheckData()"> 
</form> 
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其 中 CheckData0 是 处 理 函 数 ， 在 文本 域 中 文本 内 容 发 生 改 变 时 被 触发 ， 则 在 该 函数 中 可 
通过 以 下 方法 返回 文本 域 Textl 的 文本 内 容 : 


var MYValue=document .Forml .Text1l.value; 

Var MYValue=document .forms [0] .Text]l .value; 

Var MyValue=document -forms [0] -elements [0] .value; 
Var MyValue=document .Forml. elements [0] .value; 

Var MyValue=document .getElementById ("Text1") .value; 


上 述 方法 虽然 比较 直观 ， 但 在 需要 引用 的 表单 元 素 较 多 时 ， 就 会 增加 JavaScript 脚本 代码 
的 宛 余 度 ， 执 行 效率 不 高 ， 一 般 用 于 访问 文档 中 多 个 表单 的 场合 。 

(2) 使 用 this.form 作为 参数 传递 。 

完全 引用 法 在 引用 目标 表单 多 个 表格 元 素 对 象 时 ， 执 行 效率 不 高 ， 这 时 可 以 使 用 
this.form 作为 参数 传递 给 处 理 函 数 进行 表单 引用 ， 从 而 克服 使 用 完全 引用 法 传递 表单 数据 所 
带 来 的 不 足 。 以 上 面 的 表单 为 例 ， 更 改 文本 域 的 onchange 事件 处 理 程序 为 以 下 形式 : 


onchange="CheckData (this .form)" 

同时 修改 CheckData0 函 数 的 定义 为 以 下 形式 : 
function CheckData (targetForm) 

|! 


在 CheckData0 函 数 中 可 使 用 以 下 方式 返回 文本 域 Textl 的 文本 内 容 : 


Var MyValue=targetForm. elements[0] .value; 
Var MyValue=targetForm.Textl] .value; 


(3) 直接 传递 。 

使 用 this 关键 字 作为 参数 可 以 传递 给 处 理 函 数 ， 但 使 用 this.form 和 this 作为 参数 所 引用 
的 对 象 不 同 。 前 者 是 对 当前 整个 表单 的 引用 ， 而 后 者 是 对 当前 元 素 的 引用 ， 也 称 为 直接 传递 
法 。 以 上 面 的 表单 为 例 ， 更 改 文本 域 的 onchange 事件 处 理 程序 为 以 下 形式 : 


onchange="CheckData(this)" 
同时 修改 CheckData0 函 数 的 定义 为 以 下 形式 : 


function CheckData (targetObject) 
1 


} 


在 CheckData0 函 数 中 可 使 用 var MyValue=targetObject.value; 方式 返回 文本 域 Textl 的 文 
本 内 容 。 直 接 传递 法 的 另 一 种 表现 方法 是 直接 传递 目标 数据 给 处 理 函数 调用 ， 这 时 需要 更 改 
文本 域 的 onchange 事件 处 理 程序 为 以 下 形式 : 


onchange="CheckData (this.value)™" 


在 CheckData0 函 数 中 可 使 用 以 下 方式 返回 文本 域 Textl 的 文本 内 容 : 


Var MyValue=targetObject 


13.4.2 案例 一 一 编辑 表单 元 素 的 脚本 


在 HTML 中 ， 几 乎 所 有 客户 端 向 服务 器 传递 的 信息 都 需要 放 在 表单 中 。 通 常情 况 下 ， 用 
户 在 注册 某 个 网 站 或 者 论坛 时 ， 需 要 填写 用 户 名 、 密 码 、 邮 箱 等 信息 。 这 些 信 息 被 存放 在 一 
个 不 可 见 的 表单 中 ， 而 用 户 的 信息 就 储存 在 表单 的 各 种 控件 中 。 表 单 控件 就 是 在 表单 中 ， 其 
作用 是 接收 用 户 信息 并 与 用 户 交 互 ， 同 时 控制 用 户 信息 的 一 些 HIML 元 素 。 常 用 的 表单 控件 
有 文本 框 、 列 表 框 、 组 合 框 、 复 选 框 、 单 选 按钮 、 按 钮 等 。 


1. 文本 框 


文本 框 是 用 来 记录 用 户 输入 信息 的 HTML 元 素 ， 是 最 常用 的 表单 元 素 。 由 于 文本 框 中 的 
信息 可 以 被 编辑 ， 因 此 需要 修改 某 些 信息 时 ， 经 常 使 用 文本 框 来 实现 客户 端 与 服务 器 之 间 传 
递 数据 的 功能 文本 框 有 单行 文本 框 、 多 行文 本 框 、 密 码 文本 框 等 多 种 。 

各 文本 框 详细 内 容 如 下 。 

(1) 单行 文本 框 。 单 行文 本 框 多 用 来 记录 及 显示 数据 量 较 小 的 信息 ， 例 如 用 户 名 、 姓 
名 、 电 子 邮箱 等 。 其 语法 格式 如 下 : 


<input type="text" name="Textl" size="20" maxlength="15"> 


其 中 ， 各 属性 的 含义 如 下 。 

@ type="text": 定义 单行 文本 输入 框 。 

e@ name: 定义 文本 框 的 名 称 。 要 保证 数据 的 准确 采集 ， 必 须 定义 一 个 独一无二 的 

名 称 。 

esize: 定义 文本 框 的 宽度 ， 单 位 是 单个 字符 宽度 。 

e@ maxlength: 定义 最 多 可 输入 的 字符 数 。 

@ ”value: 定义 文本 框 的 初始 值 。 

(2) 多 行文 本 框 。 多 行文 本 框 多 用 来 记录 及 显示 数据 量 较 大 的 信息 ， 例 如 产品 描述 信 
息 、 自 我 介绍 、 文 字 创作 的 内 容 等 。 其 语法 格式 如 下 : 


<textarea name="example2" cols="20" rows="2" wrap="PHYSICAL"></ textarea > 


其 中 ， 各 个 属性 的 含义 如 下 。 
@ name: 定义 多 行文 本 框 的 名 称 。 要 保证 数据 的 准确 采集 ， 必 须 定 义 一 个 唯一 的 名 
称 。 
cols: 定义 多 行文 本 框 的 宽度 ， 其 单位 是 单个 字符 宽度 。 
rows: 定义 多 行文 本 框 的 高 度 ， 其 单位 是 单个 字符 高 度 。 
wrap: 定义 输入 内 容 大 于 文本 域 时 显示 的 方式 owanp 的 可 选 值 如 下 。 
@ 默认 值 : 文本 自动 换行 ， 当 输入 内 容 超过 文本 域 的 右边 界 时 ， 文 本 会 自动 转 到 下 一 

行 ， 而 数据 在 被 提交 处 理 时 自动 换行 的 地 方 不 会 有 换行 符 出 现 。 

@ Off: 用 来 避免 文本 换行 ， 当 输入 的 内 容 超过 文本 域 右 边界 时 ， 文 本 将 向 左 滚动 ， 必 
用 Return 才能 将 插入 点 移 到 下 一 行 。 

图 Virtual: 允许 文本 自动 换行 。 当 输入 内 容 超过 文本 域 的 右边 界 时 ， 文 本 会 自动 转 到 
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下 一 行 ， 而 数据 在 被 提交 处 理 时 自动 换行 的 地 方 不 会 有 换行 符 出 现 。 

田 Physical: 让 文本 换行 ， 当 数据 被 提交 处 理 时 换行 符 也 将 被 一 起 提交 处 理 。 

(3) 密码 文本 框 。 密 码 文本 框 用 来 记录 及 显示 密码 。 它 可 将 所 有 输入 的 信息 都 显示 成 系 
统 默认 的 字符 ， 从 而 起 到 隐藏 信息 的 作用 。 其 语法 格式 如 下 : 


<input type="password" name="example3" size="20" maxlength="15"> 


其 中 ， 各 属性 的 含义 如 下 。 

@ type="password": 定义 密码 框 。 

e name: 定义 密码 框 的 名 称 。 要 保证 数据 的 准确 采集 ， 必 须 定 义 一 个 独一无二 的 

名 称 。 

@ size:; 定义 密码 框 的 宽度 ， 其 单位 是 单个 字符 宽度 。 

e@ ”maxlength: 定义 最 多 可 输入 的 字符 数 。 

(4) 文件 上 传 框 。 有 了 时候， 需要 用 户 上 传 自己 的 文件 ， 文 件 上 传 框 看 上 去 和 其 他 文本 域 
差不多 ， 只 是 它 还 包含 了 一 个 浏览 按钮 。 访 问 者 可 以 通过 输入 需要 上 传 的 文件 路 径 或 者 单 击 
浏览 按钮 来 上 传 文件 。 在 使 用 文件 域 以 前 ， 要 先 确 定 自己 的 服务 器 是 否 允 许 匿名 上 传 文件 。 
表单 标签 中 必须 设置 ENCTYPE="multipart/form-data" 来 确保 文件 能 被 正确 编码 。 另 外 ， 表 单 
的 传送 方式 必须 设置 成 POST。 其 语法 格式 如 下 : 


<input type="file" name="myfile" size="15" maxlength="100"> 


其 中 ， 各 属性 的 含义 如 下 。 

@ ”type="file": 定义 文件 上 传 框 。 

e@ name: 定义 文件 上 传 框 的 名 称 。 要 保证 数据 的 准确 采集 ， 必 须 定义 一 个 唯一 的 

名 称 。 

e@ size: 定义 文件 上 传 框 的 宽度 。 其 单位 是 单个 字符 宽度 。 

@ maxlength: 定义 最 多 可 输入 的 字符 数 。 

2. 按钮 

按钮 的 类 型 有 普通 按钮 、 重 置 按钮 和 提交 按钮 3 种 。 各 按钮 的 详细 内 容 如 下 。 

(1) 普通 按钮 。 

在 HTML 页 面 中 按钮 的 使 用 标记 为 button。 普 通 按钮 元 素 值 在 HTML 页 面 中 的 使 用 方法 
如 下 : 


<input type="button" [name="btnName"] value="btnValue" 
[onclick="clkHandle()"]> 


其 中 ，type 属性 是 必需 属性 ， 其 属性 值 必须 是 button， 用 于 指定 input 元 素 的 类 型 是 按 
钮 。name 属性 用 于 指定 按钮 元 素 的 名 称 ， 为 元 素 指 定 name 属性 。 在 JavaScript 中 根据 name 
属性 值 可 方便 地 获取 对 象 。value 属性 用 于 指定 button 按钮 在 页 面 中 显示 的 按钮 文本 ， 如 果 
vaule 属性 赋值 为 “确定 ”， 那 么 在 HTML 页 面 中 会 显示 一 个 【确定 】 按 钮 。 按 钮 多 数 用 来 供 
用 户 单 击 ， 因 此 按钮 处 理 最 多 的 事件 就 是 onclick 事件 。 在 添加 button 元 素 时 可 以 指定 onclick 
事件 的 事件 处 理 程序 。 


(2) 重 置 按钮 。 

重 置 按钮 用 来 控制 页 面 中 与 重 置 按钮 在 同一 个 form 中 的 所 有 元 素 的 值 保持 初始 状态 。 例 
如 在 页 面 中 添加 一 个 【 重 置 】 按 钮 : <input type="reset" name="btnRst" value=" 重 置 "> 。 

当 用 户 单 击 【 重 置 】 按 钮 时 ， 如 果 在 文本 框 中 输入 信息 ， 文 本 框 就 会 自动 清空 ， 如 果 页 
面 中 存在 复 选 框 ， 单 击 “ 重 置 ”按钮 后 ， 所 有 的 复 选 框 都 会 被 置 为 未 选中 状态 ， 如 果 页 面 中 
存在 单 选 按钮 ， 所 有 的 单 选 按钮 都 会 处 于 未 选中 状态 。 

(3) 提交 按钮 。 

提交 按钮 与 重 置 按 钮 都 是 按钮 的 特殊 形式 。 提 交 按 钮 在 HIML 页 面 中 的 使 用 方法 如 下 : 


<input type="submit"”name="btnSbt"” value=" 提 交 "> 


其 中 type 属性 的 类 型 是 submit， 表 示 当 前 按钮 是 一 个 提交 按钮 。 用 户 单 击 提交 按钮 相当 
于 提交 的 是 按钮 所 在 的 表单 (form)， 即 相当 于 执行 以 下 代码 : 


document .forms[0] .submit (); 


用 户 单 击 【 提 交 】 按 钮 后 ， 系 统 会 按照 form 定义 时 指定 的 action 属性 的 值 ， 找 到 提交 的 
结果 或 处 理 程序 。 另 外 ， 使 用 图 像 按 钮 可 以 使 网 页 看 起 来 更 为 美观 。 创 建 图 像 按钮 有 多 种 方 
法 ， 常用 的 方法 是 给 图 片 加 上 链接 ， 并 附加 一 个 JavaScript 编写 的 触发 器 。 其 格式 如 下 : 


<a href="JavVaScript:document .Forml .submit () ?7"> 
<img Src="1 .gif" width="55" height="21" border="0" alt="Submit"> 
</a> 


3. 复 选 框 


复 选 框 有 两 种 状态 : 选中 与 被 选中 。 复 选 框 被 选中 后 ， 还 可 以 将 其 状态 更 改 为 没有 选中 
状态 ， 这 也 是 复 选 框 与 单 选 按钮 的 区 别 之 一 。 

在 HTML 页 面 中 ， 复 选 框 需要 使 用 input 元 素 ， 其 type 类 型 是 checkbox。 其 使 用 方法 
如 下 : 


<input type="checkbox" [name="chkName"] [ value="yes"][ checked] [onclick="clkFun"]> 


其 中 ， 各 个 参数 的 含义 如 下 。 

e@ type: 用 来 指定 input 元 素 的 类 型 为 checkbox， 在 HTML 页 面 中 得 到 一 个 复 选 框 。 

@ ”name: 指定 当前 复 选 框 的 名 称 ， 在 JavaScript 中 可 通过 复 选 框 的 名 称 得 到 复 选 框 。 

e@ value: 用 于 指定 复 选 框 的 值 ， 用 户 指定 复 选 框 的 值 以 后 ， 使 用 JavaScript 得 到 的 复 
选 框 对 象 的 值 就 是 value 属性 的 值 。 

@ checked: 由 于 指定 复 选 框 是 否 被 选中 ， 如 果 指 定 了 复 选 框 的 checked 属性 ， 复 选 框 
会 添加 一 个 V 号 。 

e@ ”onclick: 代表 复 选 框 的 单 击 事件 ，onclick 属性 的 值 一 般 是 一 个 已 经 定义 的 单 击 事件 
的 事件 处 理 函 数 名 。 

复 选 框 只 有 一 个 方法 : click0， 它 模拟 复 选 框 上 的 单 击 动作 。 另 外 它 还 有 一 个 事件 : 

onclick。 只 要 复 选 框 被 单 击 ， 就 会 发 生 该 事件 。 
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4. 单 选 按 钮 
在 HTML 页 面 中 单 选 按钮 的 使 用 方法 如 下 : 


<input type="radio" name="rdoName" value="vdoVal"[ checked]> 


其 中 ， 各 个 参数 的 含义 如 下 。 

etype: 用 于 指定 input 元 素 的 类 型 ， 单 选 按钮 的 类 型 是 radio，type 属性 为 必 选 属性 。 

。 ”name: 用 于 指定 单 选 按钮 的 属性 ， 同 时 各 个 单 选 按钮 之 间 以 name 属性 区 分 是 否 互 
斥 。name 属性 值 相同 的 单 选 按钮 之 间 是 互 斥 的 ， 即 name 属性 值 相同 的 单 选 按钮 ， 
被 选中 其 中 的 一 个 之 后 ， 其 他 的 按钮 就 自动 将 状态 改 为 被 选中 。name 属性 值 在 单 选 
按钮 中 是 必 选 的 ， 否 则 系统 无 法 确定 哪些 单 选 按钮 是 互 斥 的 。 

evalue: 用 于 指定 单 选 按钮 的 值 。 

echecked: 用 于 指定 单 选 按钮 是 否 被 选中 ， 在 单 选 按钮 定义 时 ， 指 定 其 checked 属 
性 ， 单 选 按钮 显示 为 选中 状态 。 


5. 下 拉 列 表 框 和 组 合 框 
组 合 框 是 以 下 拉 列 表 的 形式 列 出 多 条 数据 ， 如 图 13-17 所 示 ; 列表 框 是 将 多 条 数据 在 一 


个 区 域 中 显示 ， 如 图 13-18 所 示 。 
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图 13-17 组合 框 的 效果 图 13-18 ”列表 框 的 效果 图 


在 HTML 中 ， 列 表 框 与 组 合 框 都 使 用 <select> 标 记 ， 同 时 两 者 通过 size 属性 控制 其 是 列 
表 框 还 是 组 合 框 。 列 表 框 与 组 合 框 都 有 子 元 素 <option>， 且 子 元 素 的 使 用 方法 相同 。 

在 HIML 中 ，select 元 素 是 成 对 出 现 的 ， 每 个 select 元 素 都 需要 有 关闭 标记 </select>。 
select 元 素 有 option 子 元 素 ， 子 元 素 可 以 没有 关闭 标记 。select 元 素 及 其 子 元 素 的 使 用 方法 
如 下 : 


<select [name=sltName] [id=sltId] [size=sltSize] [multipie] [disabled]> 
<option[selected] [ value="openVall"]>optionLabell1[</option>] 


<option[selected] [ value="openValn"]>optionLabeln[</option>] 
</select> 
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其 中 ， 各 个 参数 的 含义 如 下 。 

e ”name: 表示 从 客户 端 向 服务 器 传递 信息 。 

e@ id: 唯一 标识 select 元 素 。 

e@ size: 指定 显示 的 列表 项 的 数量 。 组 合 框 与 列表 框 的 区 别 通过 size 属性 来 体现 的 。 如 
果 不 指定 size 属性 的 值 ， 或 者 将 size 的 值 赋 为 1， 则 在 加 载 HTML 页 面 时 ，select 元 
素 将 按照 组 合 框 的 形式 显示 。 如 果 指 定 的 size 属性 的 值 大 于 1， 则 在 页 面 中 select 元 
素 将 按照 列表 框 的 形式 显示 。 

e ”multiple: 如 果 需 要 在 列表 框 中 同时 选择 多 条 记录 ， 则 需 
要 为 select 元 素 指 定 multiple 属性 。multiple 属性 有 两 种 实 dr A 
现形 式 : 一 是 直接 在 select 元 素 中 添加 multiple， 二 是 在 00a. i 
select 元 素 中 添加 multiple="multiple"。 为 select 元 素 添加 习 


100001015 
mnultiple 属性 后 ， 用 户 只 要 使 用 Ctrl 或 Shift 键 ， 就 可 以 实 100001016 


现 同时 选择 多 条 信息 的 效果 ， 如 图 13-19 所 示 。 

edisabled: 需要 限制 select 元 素 不 能 被 使 用 时 ， 可 以 为 60 回 
select 元 素 添加 disabled 属性 。 

e@ ”option: option 元 素 的 selected 属性 用 来 指定 列表 项 是 否 被 13-19 同时 选中 多 条 
选中 。 如 果 为 option 元 素 指定 了 selected 属性 ， 那 么 这 条 记录 的 效果 
option 元 素 会 高 亮 显示 。 

e@ ”value: 用 来 指定 option 元 素 的 值 ， 如 果 选 中 了 select 元 素 的 某 条 记录 ， 那 么 这 个 
select 元 素 的 值 就 是 被 选中 的 那 条 记录 的 value 属性 的 值 。 

@ ”optionLabell: 用 来 指明 列表 项 显示 的 内 容 ， 相 当 于 显示 用 的 labell 。 

@ select: select 元 素 最 经 常 使 用 的 事件 就 是 onchange 事件 ， 另 外 还 有 onclick 事件 、 
ondblclick 事件 等 。 


13.4.3 ”案例 一 一 使 用 JavaScript 获取 网 页 内 容 实 现 数 据 验 证 


在 JavaScript 中 获取 页 面 元 素 的 方法 有 很 多 种 。 其 中 ， 比 较 常 用 的 方法 是 根据 元 素 名 称 获 
取 和 根据 元 素 Id 获取 。 例 如 ， 在 JavaScript 中 获取 名 为 ktName 的 HTML 网 页 文本 框 元 素 ， 
有 具体 的 代码 如 下 : 


Var txtNameObj=document.forms[0] .elements ("txtName") 


其 中 变量 _txtNameObj 即 为 名 为 ktName 的 文本 框 元 素 。 
【 例 13.17】 (实例 文件 ，ch13\13.17.html) 使 用 JavaScript 获取 网 页 内 容 ， 实 现 数据 验 
证 。 代 码 如 下 : 


<html> 
<head> 
<tit1le> 验 证 表单 数据 的 合法 性 </title> 
<script language="Javascript"> 
| 
function validate() 
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var txtNameObj = document.all.txtName; // 获 取 文本 框 对 象 
Var txtNameValue = txtNameObj.value; // 文 本 框 对 象 的 值 
if(( txtNameValue == null) || ( txtNameValue.length < 1) 

{ // 判 断 文本 框 的 值 是 否 为 空 


window.alert (" 输 入 的 内 容 不 能 是 空 字符 ! ") 7 
txtNameObj .focus () ; // 文 本 框 获得 焦点 
return; 
} 
if( txtNameValue.length > 20) 
{ // 判 断 文本 框 的 值 ， 长 度 是 否 大 于 20 
window.alert (" 输 入 的 内 容 过 长 ， 不 能 超过 20! ") 
txtNameObj .focus () 
return; 
} 
if(isNaN( txtNameValue)) 
{ // 判 断 文本 框 的 值 ， 是 否 全 是 数字 
window.alert (" 输 入 的 内 容 必须 由 数字 组 成 ! ") ; 
txtNameObj .focus () 
return; 
} 
} 
Ws 
</script> 
</head> 
<body> 
<form method=post action="#"> 
<input type="text" name="txtName"> 
<input type="button" value=" 确 定 " onclick="validate (> 
</form> 
</body> 
</html> 


上 述 代 码 先 获得 了 文本 框 对 象 及 其 值 ， 再 对 其 值 是 否 为 空 进行 判断 ， 对 其 值 长 度 是 否 大 
于 20 进行 判断 ， 并 对 其 值 是 否 全 是 数字 进行 判断 。 在 正 9.0 浏览 器 中 预览 上 述 HTML 文件 ， 
单 击 【 确 定 】 按 钮 ， 即 可 看 到 “输入 的 内 容 不 能 是 空 字符 ! ”提示 信息 ， 如 图 13-20 所 示 。 


如 果 在 文本 框 中 输入 数字 的 长 度 大 于 20， 单 击 【确定 】 按 钮 ， 即 可 看 到 “输入 的 内 容 过 
长 ， 不 能 超过 20! ”的 提示 信息 ， 如 图 13-21 所 示 。 


sa Ea 而 三 
EEC EEC 
§ 

文件 (月 。 舌 编 (和 查 震 ( 收 襄 才 |A) ”工具 (T) 大 动 (H) > 


蕊 100% ~ 时 100% ~ 


13-20 ”文本 框 为 空 效果 图 图 13-21 文本 框 长 度 过 大 效果 


全 
四 加 


当 输 入 内 容 的 是 非 数 字 时 ， 就 会 看 到 “输入 的 内 容 必须 由 数字 组 成 ! ”的 提示 信息 ， 如 
图 13-22 所 示 。 


EE 
(二 于 evososvevescrpasR 发 时 -Cc| 但 站 这 
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13-22 文本 框 内 容 不 是 数字 的 效果 
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本 实例 将 使 用 表单 内 的 各 种 元 素 开 发 一 个 简单 的 网 站 用 户 意 见 反 馈 页 面 。 

具体 操作 步骤 如 下 。 

EC 分 析 需 求 。 反 馈 表单 非常 简单 ， 通 常 包含 3 个 部 分 ， 需 要 在 页 面 上 方 给 出 标 
题 ， 标 题 下 方 是 正文 部 分 ， 即 表单 元 素 ， 最 下 方 是 表单 元 素 提交 按钮 。 在 设计 该 页 面 时 ， 需 
要 把 “用 户 注册 “标题 设置 成 H! 大 小 ， 正 文 使 用 p 来 限制 表单 元 素 。 

EC 构建 HIML 页 面 ， 实 现 表 单 内 容 。 代 码 如 下 : 


<!DOCTYPE html> 


<html> 

<head> 

<title> 用 户 反馈 页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 反馈 表单 </h1> 

<form method="post" > 

<p> 姓 gnbsp; gnbsp; snbsp; &gnbsp; 名 : 

<input type="text" class=txt size="12"” maxlength="20" name="username" /> 
</p><p> 性 gnbsp; gnbsp; gnbsp; &nbsp; 别 : 

<input type="radio" value="male" /> 男 
<input type="radio" value="female" /> 女 
</p><p> 年 gnbsp; gnbsp; gnbsp; gnbsp; 龄 : 

<input type="text" class=txt name="age" /> 
</p> 

<p> 联 系 电话 

<input type="text" class=txt name="tel" /> 
</p><p> 电 子 邮 件 : 


<input type="text" class=txt name="email" /> 
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</p><p> 联 系 地 址 : 
<input type="text" class=txt name="address" /> 
</p> 


<p> 

请 输入 您 对 网 站 的 建议 <br> 

<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 

<input type="submit"” name="submit"” value=" 提 交 "/> 

<input type="reset" name="reset"” value=" 清 除 ” /> 

</p> 

</form> 

</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 13-23 所 示 。 从 中 可 以 看 到 创建 的 用 户 反 馈 
表单 包含 有 “用 户 注册 ”、“ 姓 名 ”、“ 人 性 别 ”、“ 年 龄 ”、“ 联 系 方式 ”、“ 电 子 邮 
NS 件 ”、“ 地 址 ”、“ 意 见 反馈 ”等 输入 框 和 “提交 ”按钮 等 。 


由 GWUserswingda\c -CX | 乱用 户 反 局面 
文件 明生 和 日。 下 看 M) 收藏 夫人 A) 工具 (Tm 如 二 (H) 
用 户 反馈 表单 

> 姓 名 

性 ” 别 ，@ 男 自 女 

年 ”的 : 

联系 电话 ， 

电子 邮件 ， 

联系 地 址 ， 

请 输入 您 对 网 站 的 建议 

ED 


13-23 ”用 户 反馈 页 面 


13.6 ” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: 表单 基本 元 素 的 使 用 。 
练习 2: 表单 高 级 元 素 的 使 用 。 
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练习 3: 表单 对 象 在 JavaScript 中 的 应 用 。 


13.7 高 手 甜 点 


甜点 1: 如 何在 表单 中 实现 文件 上 传 框 ? 


在 HIML 语言 中 ， 使 用 file 属性 实现 文件 上 传 框 。 其 语法 格式 为 “<input type="file" 
name="..." size="..." maxlength="...">”。 其 中 type="file" 定 义 为 文件 上 传 框 ，name 属性 为 文件 
上 传 框 的 名 称 ; size 属性 定义 文件 上 传 框 的 宽度 ， 单 位 是 单个 字符 宽度 ，maxlength 属性 定义 
最 多 可 输入 的 字符 数 。 文 件 上 传 框 在 正 9.0 浏览 器 中 的 显示 效果 如 图 13-24 所 示 。 


EO uve ex]O eeervned 


图 13-24 文件 上 传 框 
甜点 2: 制作 的 单 选 框 为 什么 可 以 同时 选中 多 个 ? 


此 时 用 户 需要 检查 单 选 框 的 名 称 ， 保 证 同一 组 中 的 单 选 框 名 称 必须 相同 ， 这 样 才能 保证 
单 选 框 只 能 同时 选中 其 中 的 一 个 。 
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仅 定义 了 网 页 结构 ， 对 于 文本 样 


问 量 的 网 站 ， 是 网 页 设计 者 的 追求 。 然 而 ， 
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式 却 没有 过 多 涉及 。 这 就 需要 一 种 技术 对 页 面 布局 、 字 体 、 颜 色 、 背 景 和 其 他 图 文 
效果 的 实现 提供 更 加 精确 的 控制 ， 这 种 技术 就 是 级 联 样式 表 ， 简 称 CSS。 


仅 通 过 HTML 实现 是 非常 困难 的 ，HTML 语言 仅 
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14.1 CSS 简介 


使 用 CSS3 最 大 的 优势 是 ， 在 后 期 维护 中 如 果 有 一 些 外 观 样式 需要 修改 ， 那 么 只 需 修改 
相应 的 代码 即 可 。 


14.1.1 CSS 的 功能 


随 着 Internet 不 断 发 展 ， 用 户 对 页 面 效 果 的 诉求 越 来 越 强烈 ， 只 依赖 HTML 这 种 结构 化 
标记 ， 实 现 样式 已 经 不 能 满足 网 页 设计 者 的 需要 。 其 表现 有 以 下 几 个 方面 。 

(1) 维护 困难 。 为 了 修改 某 个 特殊 标记 格式 ， 需 要 花费 很 多 时 间 ， 尤 其 对 整个 网 站 而 
言 ， 后 期 修改 和 维护 成 本 较 高 。 

(2) 标记 不 足 。HTML 本 身 的 标记 十 分 少 ， 很 多 标记 都 是 为 网 页 内 容 服 务 ， 而 关于 内 容 
样式 标记 ， 例 如 文字 间距 、 段 落 缩 进 很 难 在 HTML 中 找到 。 

(3) 网 页 过 于 爱 肿 。 由 于 没有 统一 对 各 种 风格 样式 进行 控制 ，HTML 页 面 往往 体积 过 
大 ， 占 用 掉 了 很 多 宝贵 的 宽度 。 

(4) 定位 困难 。 在 整体 布局 页 面 时 ，HTML 对 于 各 个 模块 的 位 置 调整 显得 捉襟见肘 ， 过 
多 的 table 标记 将 会 导致 页 面 的 复杂 和 后 期 维护 的 困难 。 

在 这 种 情况 下 ， 就 需要 寻找 一 种 可 以 将 结构 化 标记 与 丰富 的 页 面 表现 相 结合 的 技术 。 
CSS 样式 技术 就 产生 了 。 

CSS(Cascading Style Sheet， 层 登 样 式 表 )， 又 称 CSS 样式 表 或 样式 表 ， 其 文件 扩展 名 


计 者 可 以 对 网 页 布局 进行 更 多 的 控制 。 利 用 样式 表 ， 可 以 将 整个 站 点 上 所 有 网 页 都 指向 某 个 
CSS 文件 ， 设 计 者 只 需要 修改 CSS 文件 中 的 某 一 行 ， 整 个 网 页 上 对 应 的 样式 都 会 随 之 发 生 


14.1.2 CSS 发 展 历史 


万 维 网 联盟 是 一 个 非 营 利 的 标准 化 联盟 。 该 联盟 于 1996 年 制定 并 发 布 了 一 个 网 页 排版 样 
式 标准 ， 即 层 闭 样式 表 ， 用 来 对 HTML 有 限 的 表现 功能 进行 补充 。 

随 着 CSS 的 广泛 应 用 ，CSS 技术 越 来 越 成 熟 。CSS 现在 有 三 个 不 同 层次 的 标准 ， 即 
CSS1、CSS2 和 CSS3 。 

CSS1(CSS Level 1) 是 CSS 的 第 一 层次 标准 ， 它 正式 发 布 于 1996 年 12 月 17 日 ， 修 改 于 
1999 年 1 月 11 日 。 该 标准 提供 了 简单 的 样式 表 机 制 ， 使 网 页 的 编者 通过 附属 的 样式 对 
HTML 文档 的 表现 进行 描述 。 


CSS2(CSS Level 2) 于 1998 年 5 月 12 日 被 正式 作为 标准 发 布 。CSS2 基于 CSS1， 包 含 了 
CSS1 的 所 有 特色 和 功能 ， 并 在 多 个 领域 进行 了 完善 ， 对 表现 样式 文档 和 文档 内 容 进 行 了 分 
离 。CSS2 支持 多 媒体 样式 表 ， 使 得 我 们 能 够 根据 不 同 的 输出 设备 给 文档 制定 不 同 的 表现 形式 。 

2001 年 5 月 23 日 ,万维网 联盟 完成 了 CSS3 的 工作 草案 ， 在 该 草案 中 制订 了 CSS3 的 发 
展 路 线 图 ， 详 细 列 出 了 所 有 模块 ， 并 计划 在 未 来 逐步 对 其 进行 规范 。 在 以 后 的 时 间 内 ， 万 维 
网 联盟 逐渐 发 布 了 不 同 模块 。 

CSS 1 主要 定义 了 网 页 的 基本 属性 ， 例 如 字体 、 颜 色 、 空 白 边 等 。CSS 2 在 此 基础 上 添加 
了 一 些 高 级 功能 ， 例 如 浮动 和 定位 ， 以 及 一 些 高 级 的 子 选 择 器 、 相 邻 选择 器 和 通用 选择 器 
等 。CSS 3 开始 遵循 模块 化 开发 ， 这 将 有 助 于 理 清 模块 化 规范 之 间 的 不 同 关 系 ， 减 少 完整 文 
件 的 大 小 。 以 前 的 规范 是 一 个 完整 的 模块 ， 实 在 是 太 庞大 ， 而 且 比 较 复杂 ， 所 以 ， 新 的 CSS 
3 规范 将 其 分 成 了 多 个 模块 。 


14.1.3 ”浏览 器 与 CSS 


CSS 3 制定 完成 之 后 ， 具 有 了 很 多 新 功能 ， 即 新 样式 。 但 这 些 新 样式 在 浏览 器 中 不 能 获 
得 完全 支持 。 其 主要 原因 是 各 个 浏览 器 对 CSS 3 在 很 多 细节 处 理 上 存在 差异 ， 例 如 一 种 标记 
的 某 个 属性 这 种 浏览 器 支持 ， 而 另外 一 种 浏览 器 却 不 支持 ， 那 么 其 显示 效果 肯定 不 一 样 。 

各 主流 浏览 器 ， 为 了 自己 的 产品 利益 和 推广 ， 定 义 了 很 多 私有 属性 ， 以 便 加 强 页 面 显示 
样式 和 效果 ， 导 致 现在 的 各 种 浏览 器 都 存在 大 量 的 私有 属性 。 虽 然 使 用 私有 属性 ， 可 以 快速 
构建 效果 ， 但 会 给 网 页 设计 者 带 来 很 大 的 麻烦 ， 在 设计 时 就 需要 考虑 在 不 同 浏览 器 上 的 显示 
效果 。 如 果 所 有 浏览 器 都 支持 CSS 3 样式 ， 那 么 网 页 设计 者 只 需要 使 用 一 种 统一 标记 ， 就 能 
在 不 同 浏览 器 上 显示 统一 的 样式 效果 。 

当 CSS 3 被 所 有 浏览 器 接受 和 支持 的 时 候 ， 整 个 网 页 设计 将 会 变 得 非常 容易 ， 其 布局 也 
更 加 合理 ， 样 式 也 更 加 美观 ， 到 时 ， 整 个 Web 页 面 显示 会 焕然 一 新 。 虽 然 现在 CSS 3 还 没有 
被 完全 普及 ， 各 个 浏览 器 对 CSS 3 的 支持 还 处 于 发 展 阶段 ， 但 CSS 3 是 一 个 新 的 具有 很 大 发 
展 潜力 的 技术 ， 在 样式 修饰 方面 ， 是 其 他 技术 无 可 替代 的 。 现 在 学 习 CSS 3 技术 ， 可 保证 技 
术 不 落伍 。 


14.1.4 ”CSS 基础 语法 


CSS 样式 表 由 若干 条 样式 规则 组 成 ， 这 些 样式 规则 在 不 同 的 元 素 或 文档 中 用 来 定义 它们 
显示 的 外 观 。 每 一 条 样式 规则 由 3 部 分 构成 : 选择 符 (selector)、 属 性 (property) 和 属性 值 
(value)。 其 基本 格式 如 下 : 


selector{property: value} 


(1) selector 选择 符 有 多 种 形式 ， 可 以 是 文档 中 的 HTML 标记 ， 例 如 <body>、<table>、 
<p> 等 ， 也 可 以 是 XML 文档 中 的 标记 。 

(2) property 属性 则 是 选择 符 指定 的 标记 所 包含 的 属性 。 

(3) value 指定 了 属性 的 值 。 如 果 定 义 选择 符 的 多 个 属性 ， 则 属性 和 属性 值 为 一 组 ， 组 与 
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组 之 间 用 分 号 () 隔 开 。 其 基本 格式 如 下 : 
selector{propertyl: valuel; property2: value27- } 
示例 样式 规则 ， 代 码 如 下 : 
p{color:red} 


该 样式 规则 中 的 选择 符 p， 为 段落 标记 <p> 提 供 样 式 ，color 为 指定 文字 颜色 属性 ，red 为 
属性 值 。 该 样式 表示 标记 <p> 指 定 的 段落 文字 为 红色 。 
如 果 要 为 段落 设置 多 种 样式 ， 则 可 以 使 用 下 列 语句 : 


p{font-family: "隶书 "; color:red; font-size:40px; font-weight:bold} 


14.2 编辑 和 浏览 CSS 


由 于 CSS 文件 是 纯 文本 格式 文件 ， 因 此 在 编辑 CSS 时 有 多 种 选择 ， 例 如 使 用 简单 的 纯 文 
本 编辑 工具 一 一 记事 本 等 。 当 然 也 可 以 选择 专业 的 CSS 编辑 工具 ， 例 如 Dreamweaver 等 。 记 
事 本 编辑 工具 适合 于 初学 者 ， 不 适合 大 项 目 编辑 ， 但 专业 工具 软件 通常 占有 的 空间 较 大 ， 打 
开 不 太 方 便 。 用 户 可 根据 自身 需求 选择 合适 的 编辑 工具 。 


14.2.1 案例 一 一 手工 编写 CSS 


由 于 CSS 是 文本 格式 ， 因 此 传统 的 文本 编辑 器 如 记事 本 、Word 都 可 以 编辑 CSS， 当 然 
这 些 编辑 软件 不 支持 语法 提示 ， 也 不 支持 验证 ， 严 重 影响 了 开发 效率 。 但 使 用 记事 本 手工 编 
写 CSS 文件 ， 可 以 使 初学 者 更 快 地 掌握 CSS 3 技术 。 
【 例 14.1】 (实例 文件 ，ch14\14.1.html) 手 工 编写 CSS。 步 又 如 下 。 
四 TD 打开 记事 本 ， 输 入 HTML 代码 ， 如 图 14-1 所 示 。 
EEC 添加 CSS 代码， 修饰 HTML 元素 ， 在 head 标记 中 间 添 加 CSS 样式 代码 ， 如 
图 14-2 所 示 。 从 窗口 中 可 以 看 出 ， 在 head 标记 中 间 添 加 了 一 个 style 标记 ， 即 CSS 
样式 标记 。 在 style 标记 中 间 ， 对 p 样式 进行 了 设 定 ， 设 置 段落 居中 显示 并 且 颜 色 为 
红色 。 
EEJey 程序 编辑 完成 后 ， 使 用 下 9.0 浏览 器 打开 程序 ， 显 示 效 果 如 图 14-3 所 示 。 从 中 
可 以 看 到 段落 在 页 面 中 间 以 红色 字体 显示 。 
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bs 个 段落 ， 使 用 CSS 修 族人 /p> mr 使 用 CSS 修 肇 c/p> 
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这 是 一 个 自 秒 ,使 用 css 修饰 


图 14-1 记事 本 开发 HTML 图 14-2 添加 样式 图 14-3 CSS 样式 显示 窗口 
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14.2.2 ”案例 一 一 Dreamweaver 编写 CSS 


随 着 Web 的 发 展 ， 越 来 越 多 的 开发 人 员 开 始 使 用 功能 更 多 、 界 面 更 友好 的 专用 CSS 编辑 
器 ， 例 如 Dreamweaver 的 CSS 编辑 器 和 Visual Studio 的 CSS 编辑 器 。 这 些 编辑 器 都 带 有 语法 
着 色 和 输入 提示 功能 ， 甚 至 有 自动 创建 CSS 的 功能 ， 深 受 开发 人 员 喜 爱 。 
【 例 14.2】 (实例 文件 ，ch14\14.2.html) 使 用 Dreamweaver 创建 CSS。 步 骤 如 下 。 
ED 使 用 Dreamweaver 创建 HTML 文档 。 本 例 创建 了 一 个 名 称 为 14.2.html 文档 ， 如 
图 14-4 所 示 。 
EC) 在 设计 模式 中 ， 选 中 “使 用 CSS 标记 修饰 ”段落 后 ， 右 击 并 在 弹出 的 快捷 菜单 
中 选择 【CSS 样式 】|【 新 建 】 命 令 ， 弹 出 如 图 14-5 所 示 的 对 话 框 。 
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图 14-4 网 页 显示 窗口 14-5 【新 建 CSS 规则 】 对 话 框 


EEIep 在 【为 CSS 规则 选择 上 下 文选 择 器 类 型 】 下 拉 表 框 中 ， 选 择 【 标 签 (重新 定义 
HTML 元 素 )】 选 项 (学 习 完 后 面 的 章节 后 ， 读 者 可 以 根据 需要 ， 选 择 不 同 的 选择 器 
类 型 )。 选 择 完成 后 ， 单 击 【确定 】 按 钮 ， 会 弹出 如 图 14-6 所 示 的 对 话 框 。 

EEC 选择 p 的 各 种 样式 设置 ， 选 择 完成 后 ， 单 击 【确定 】 按 钮 ， 就 完成 了 p 样式 设 
置 。 设 置 完成 后 ，HTML 文档 内 容 会 发 生变 化 ， 如 图 14-7 所 示 。 从 代码 模式 窗口 中 
可 以 看 到 在 head 标记 中 ， 增 加 了 一 个 style 标记 ， 用 来 放置 CSS 样式 。 其 样式 用 来 
修饰 段落 p。 
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14-6 【p 的 CSS 规则 定义 】 对 话 框 14-7 ”设置 完成 后 的 显示 效果 
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ED 在 Firefox 5 浏览 器 中 预览 该 网 页 ， 其 显示 结果 如 图 14-8 所 示 。 从 中 可 以 看 到 字 
体 颜色 被 设置 成 了 浅 红 色 ， 大 小 为 12px， 字 体 较 粗 。 
上 述 使 用 Dreamweaver 设置 CSS， 只 是 其 中 一 种 。 读 者 还 可 以 直接 在 代码 模式 中 编写 


CSS 代码 ， 此 时 会 有 很 好 的 语法 提示 。 


站 cAUsers\feiyu\De: ”CX | 克 合用 


文件 (F) ” 编 镶 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 才 :” 


使 用 C55 标 记 修饰 


14-8 CSS 样式 显示 


14.3 在 HTML 中 使 用 CSS 的 方法 


CSS 样式 表 能 很 好 地 控制 页 面 显 示 ， 以 达到 分 离 网 页 内 容 和 样式 代码 。CSS 样式 表 控制 


HTMLS 页 面 达到 好 的 样式 效果 的 方式 通常 包括 行内 样式 、 内 赚 样 式 、 链 接 样式 和 导入 样式 。 
14.3.1 案例 一 一 行内 样式 


行内 样式 是 所 有 样式 中 比较 简单 、 直 观 的 方式 ， 即 直接 把 CSS 代码 添加 到 HTML 的 标记 


中 ， 作 为 HTML 标记 的 属性 标记 存在 。 通 过 这 种 方式 ， 可 以 很 简单 地 对 某 个 元 素 单独 定义 
样式 。 


使 用 行内 样式 的 方法 是 直接 在 HTML 标记 中 使 用 style 属性 。 该 属性 的 内 容 是 CSS 的 属 


性 和 值 。 例 如 : 


<p style="color:red"> 段 落 样式 </p> 


【 例 14.3】 (实例 文件 ， chl4\14.3.htmD) 行 内 样式 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 行 内 样式 </title> 

</head> 

<body> 

<p style="color:red;font-size:20px;text-decoration:underline;text-— 
align:center"> 此 段落 使 用 行内 样式 修饰 </p> 

<p style="color:blue;font-style:italic"> 正 文 内 容 </p> 
</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 14-9 所 示 。 从 中 可 以 看 到 在 两 个 p 标记 中 都 


使 用 了 style 属性 ， 并 且 设 置 了 CSS 样式 。 各 个 样式 之 间 互 不 影响 ， 分 别 显示 着 自己 的 样式 效 
果 。 第 1 个 段落 设置 的 字体 颜色 为 红色 ， 居 中 显示 ， 带 有 下 划 线 。 第 二 个 段落 设置 的 字体 颜 


SSo 一 一 洲 闭 状 泌 泣 _ 协 了 小 


色 为 蓝 色 字体 ， 以 斜体 显示 。 


Cs cuesvee so- ox Er 


9。 二 日“ 豆 肆 MM。 收 基 夫 A|。 工具 (大 | 


此 段落 使 用 行内 样式 修饰 
下 芭 W 容 


14-9 行内 样式 显示 效果 


尽管 行内 样式 简单 ， 但 这 种 方法 不 常 使 用 ， 因 为 这 种 添加 方式 无 法 完全 发 挥 样式 表 “ 内 
容 结构 和 样式 控制 代码 ”分 离 的 优势 。 而 且 这 种 方式 也 不 利于 样式 的 重用 。 如 果 需 要 为 每 
一 个 标记 都 设置 style 属性 ， 那 么 后 期 的 维护 成 本 就 会 高 ， 网 页 也 容易 “过 胖 ”， 故 不 推荐 
使 用 。 


14.3.2 ”案例 一 一 内 藤 样 式 


内 英 样 式 是 将 CSS 样式 代码 添加 到 <head> 与 </head> 之 间 ， 并 且 用 <style> 和 </style> 标 记 
进行 声明 的 方式 。 这 种 方式 虽然 没有 完全 实现 页 面 内 容 和 样式 控制 代码 的 分 离 ， 但 可 以 设置 
一 些 比较 简单 的 样式 ， 并 统一 页 面 样式 。 

其 格式 如 下 : 


<head> 
<style type="text/css" > 
p 
1 
color:red; 
font-size:12px; 
</style> 
</head> 


由 于 有 些 较 低 版 本 的 浏览 器 不 能 识别 <style> 标 记 ， 因 而 浏览 器 不 能 完全 地 将 内 嵌 样 式 应 
用 到 页 面 显示 上 ， 而 是 直接 将 标记 中 的 内 容 以 文本 的 形式 显示 。 为 了 解决 此 类 问题 ， 可 以 使 
用 HTML 注释 将 标记 中 的 内 容 隐 藏 。 如 果 浏览 器 能 够 识别 <style> 标 记 ， 那 么 标记 内 被 注释 的 
CSS 样式 定义 代码 就 能 发 挥 作用 。 


<head> 
<style type="text/css" > 
3 
p 
{ 
color:red; 
font-size:12px; 
} 
--> 
</style> | 
</head> 
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【 例 14.4】 (实例 文件 ，ch14\14.4.htmD) 内 嵌 样 式 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 内 媒 样 式 </title> 
<style type="text/css"> 
pt 
color:orange; 
text-align:center; 
font-weight:bolder; 
font-size:25px; 
3 
</style> 
</head><body> 
<p> 此 段落 使 用 内 媒 样 式 修饰 </p> 
<p> 正 文 内 容 </p> 
</body></html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 14-10 所 示 。 从 中 可 以 看 到 两 个 p 标记 都 被 
CSS 样式 修饰 ， 其 样式 保持 一 致 ， 段 落 居中 并 以 加 粗 的 橙色 字体 显示 。 
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此 段落 使 用 内 嵌 样 式 修饰 


正文 内 容 


图 14-10 ”内 嵌 样 式 显示 效果 


在 上 述 例子 中 ， 所 有 CSS 编码 都 在 <style> 标 记 中 ， 这 方便 了 后 期 维护 ， 页 面相 比较 与 行 
内 样式 大 大 瘦身 。 但 如 果 一 个 网 站 ， 拥 有 很 多 页 面 ， 对 于 不 同 页 面 的 p 标记 都 希望 采用 同样 
风格 时 ， 内 嵌 方 式 就 会 显得 有 点 麻烦 。 因 此 种 内 嵌 方 式 只 适用 于 特殊 页 面 设置 单独 的 样式 风格 。 


14.3.3 “案例 一 一 链接 样式 


链接 样式 是 CSS 中 使 用 频率 最 高 ， 也 是 最 实用 的 方法 。 它 能 很 好 地 将 “页 面 内 容 ” 和 
“样式 风格 代码 ”分 离 成 两 个 文件 或 多 个 文件 ， 实 现 了 页 面 框架 HTML 代码 和 CSS 代码 的 完 
全 分 离 ， 使 前 期 制作 和 后 期 维护 都 十 分 方便 。 同 一 个 CSS 文件 ， 根 据 需要 可 以 链接 到 网 站 中 
所 有 的 HIML 页 面 上 ， 这 可 使 网 站 整体 风格 统一 、 协 调 ， 并 大 大 减少 后 期 维护 的 工作 量 。 

链接 样式 是 指 在 外 部 定义 CSS 样式 表 并 形成 以 .css 为 扩展 名 的 文件 ， 然 后 在 页 面 中 通过 
<link> 链 接 标 记 链 接 到 页 面 中 ， 而 且 该 链接 语句 必须 放 在 页 面 的 <head> 标 记 区 ， 如 下 所 示 : 


<link rel="stylesheet" type="text/css" href="l1.css" /> 


其 中 ，rel 指定 链接 到 样式 表 ， 其 值 为 stylesheet; type 表示 样式 表 类 型 为 CSS 样式 表 ; 
href 指定 了 CSS 样式 表 所 在 位 置 ， 此 处 表示 当前 路 径 下 名 称 为 1.css 文件 。 
这 里 使 用 的 是 相对 路 径 。 如 果 HTML 文档 与 CSS 样式 表 没 有 在 同一 路 径 下 ， 则 需要 指定 
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样式 表 的 绝对 路 径 或 引用 位 置 。 
【 例 14.5】 
(1) (实例 文件 ，ch14\14.5.htmDD) 链 接 样 式 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 链 接 样式 </title> 

<link rel="stylesheet" type="text/css" href="14.5.css" /> 
</head><body> 

<h1l>Css 学 习 </h1> 

<p> 此 段落 使 用 链接 样式 修饰 </p> 

</body></html> 


(2) (实例 文件 ，ch14\14.5.css) 代 码 如 下 : 

hl{text-align:center;} 

p{font-weight:29px;text-align:center;font-style:italic;} 

上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 14-11 所 示 。 从 中 可 以 看 出 标题 和 段落 以 不 
同 的 样式 显示 : 标题 居中 显示 ， 段 落 以 斜体 居中 显示 。 


CSS 学 习 
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此 辟 容 伪 因 经 英 料 式 克 让 


图 14-11 链接 样式 显示 


链接 样式 最 大 优势 是 将 CSS 代码 和 HTML 代码 完全 分 离 ， 并 且 同 一 个 CSS 文件 能 被 不 
同 的 HTML 所 链接 使 用 。 在 设计 整个 网 站 时 ， 可 以 将 所 有 页 面 链接 到 同一 个 CSS 文件 ， 使 用 
相同 的 样式 风格 。 如 果 整 个 网 站 需要 修改 样式 ， 那 么 只 需 修改 CSS 文件 就 可 以 了 。 


14.3.4 ”案例 一 一 导入 样式 


导入 样式 和 链接 样式 基本 相同 ， 都 是 创建 一 个 单独 的 CSS 文件 ， 然 后 再 引入 到 HTML 文 
件 中 。 只 不 过 其 语法 和 运作 方式 有 差别 。 采 用 导入 样式 的 样式 表 ， 在 HTML 文件 初始 化 时 ， 
会 被 导入 到 HIML 文件 内 ， 作 为 文件 的 一 部 分 ， 类 似 于 内 嵌 效 果 。 而 链接 样式 是 在 HTML 标 
记 需 要 样式 风格 时 才 以 链接 方式 引入 。 

导入 外 部 样式 表 是 指 在 内 部 样式 表 的 <style> 标 记 中 ， 使 用 @import 导入 一 个 外 部 样式 
表 ， 例 如 : 

<head> 


<style type="text/css" > 
3 
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Qimport "1.css" 
--> </style> 
</head> 


导入 外 部 样式 表 相当 于 将 样式 表 导 入 到 内 部 样式 表 中 ， 其 方式 更 有 优势 。 导 入 外 部 样式 
表 必须 在 样式 表 的 开始 部 分 。 

【 例 14.6】 

(1) (实例 文件 : chl4\14.6.htmD 导 入 样式 的 使 用 。 代 码 如 下 : 


<html> 

<head> 
<title> 导 入 样式 </title> 
<style> 

@import "14.6.css" 
</style> 

</head> 

<body> 

<h1l>Css 学 习 </h1> 
<p> 此 段落 使 用 导入 样式 修饰 </p> 
</body> 

</html> 


(2) (实例 文件 ，ch14\14.6.css)。 代 码 如 下 : 

hl{text-align:center;color:#0000ff} 

p{font-weight:bolder;text-decoration:underline;font-size:20px;} 

上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 14-12 所 示 。 从 中 可 以 看 出 标题 和 段落 以 不 
同样 式 显 示 : 标题 居中 显示 ， 颜 色 为 蓝 色 ， 段 落 以 大 小 20px 并 加 粗 显示 。 
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图 14-12 导入 样式 显示 效果 
导入 样式 与 链接 样式 比较 ， 最 大 的 优点 是 可 以 一 次 导入 多 个 CSS 文件 。 其 格式 如 下 : 


<style> 
@import "14.6.css" 
Qimport "teatacas™ 
</style> 


14.3.5 “案例 一 一 优先 级 问题 
如 果 同 一 个 页 面 ， 采 用 了 多 种 CSS 使 用 方式 ， 且 这 几 种 样式 共同 作用 于 同一 个 标记 ， 那 
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么 就 会 出 现 优先 级 问题 ， 即 究竟 哪 种 样式 的 设置 有 效果 。 下 面 将 详细 比较 各 样式 的 优先 级 。 


se 
1. 行内 样式 与 内 谋 样 式 比较 
例如 以 下 情况 : x 
<style> \ 
-p{color:red} 
</style> 
<p style = "” color:blue "> 段落 应 用 样式 </p> 
在 上 述 样式 定义 中 ， 段 落 标记 <p> 匹 配 了 两 种 样式 规则 ， 一 种 使 用 内 嵌 样 式 定义 颜色 为 红 
; 另 一 种 使 用 p 行内 样式 定义 颜色 为 蓝 色 。 而 在 页 面 代码 中 ， 该 标记 使 用 了 类 选择 符 。 那 
， 标 记 内 容 最 终 会 以 哪 种 样式 显示 呢 ? 


六 从 
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【 例 14.7】 (实例 文件 ，ch14\14.7.html) 行 内 样式 和 内 榜样 式 优先 级 比较 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 


<title> 优 先 级 比较 </title> 

<style> 

.plcolor:red} 

</style> 

</head> 

<body> 

<p style = " color:blue "> 优先 级 测试 </p> 
</body> 

</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 14-13 所 示 。 从 中 可 以 看 到 段落 以 蓝 色 字 体 


AM 


显示 ， 由 此 可 知行 内 样式 的 优先 级 大 于 内 翌 样 式 的 优先 级 。 


图 14-13 ”优先 级 比较 显示 结果 
2. 内 广 样 式 与 链接 样式 比较 
在 例 14.7 代码 的 基础 上 ， 将 设置 颜色 样式 的 代码 单独 放 在 一 个 CSS 文件 中 ， 使 用 链接 样 


式 引入 。 


【 例 14.8】 
(1) (实例 文件 ，ch14\14.8.htmD) 测 试 内 嵌 样 式 与 链接 样式 的 优先 级 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
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<title> 优 先 级 比较 </title> 

<link href="14.8.css" type="text/css" rel="stylesheet"> 
<style>p{color:red} 

</style></head> 

<body> 

<p> 优 先 级 测试 </p> 

</body> 

</html> 


(2) (实例 文件 : ch14\14.8.css) 


p{color:yellow} 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 14-14 所 示 。 
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优先 级 测试 


人 14-14 ”优先 级 测试 结果 


从 中 可 以 看 出 ， 内 购 样 式 和 链接 样式 同时 对 段落 p 修饰 ， 段 落 显 示 红色 字体 。 由 此 可 
知 ， 内 峰 样 式 的 优先 级 大 于 链接 样式 的 优先 级 。 


3. 链接 样式 和 导入 样式 比较 


下 面 进 行 链接 样式 和 导入 样式 测试 ， 分 别 创建 两 个 CSS 文件 ， 一 个 作为 链接 ， 另 一 个 作 
为 导入 。 

【 例 14.9】 

(1) (实例 文件 ，ch14\14.9.html) 链 接 样式 和 导入 样式 的 优先 级 比较 。 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

<title> 优 先 级 比较 </title> 

<style> 

Qimport "14.9 2.css" 

</style> 

<link href="14.9 1.css"” type="text/css" rel="stylesheet"> 

</head><body> 

<p> 优 先 级 测试 </p> 

</body></html> 


(2) (实例 文件 ，ch14\14.9_1.css) 代 码 如 下 : 


p{color:green} 


(3) (实例 文件 ，ch14\14.9_2.css) 代 码 如 下 : 


p{color:purple} 


全; 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 14-15 所 示 。 从 中 可 以 看 出 ， 段 落 以 绿色 显 
示 。 由 此 可 知 ， 链 接 样式 的 优先 级 大 于 导入 样式 的 优先 级 。 


优先 级 测试 


图 14-15 优先 级 比较 结果 
14.4 CSS 选择 器 


选择 器 (selector) 又 被 称 为 选择 符 。 所 有 HTML 语言 中 的 标记 都 是 通过 不 同 的 CSS 选择 器 
进行 控制 的 。 选 择 器 不 只 是 HTML 文档 中 的 元 素 标记 ， 它 还 可 以 是 类 (Class， 这 不 同 于 面向 
对 象 中 的 列 )、ID( 元 素 的 唯一 特殊 名 称 ， 便 于 在 脚本 中 使 用 ) 或 是 元 素 的 某 种 状态 (例如 
a:link)。 根 据 CSS 选择 符 的 用 途 可 将 选择 器 分 为 标签 选择 器 、 类 选择 器 、ID 选择 器 、 全 局 选 
择 器 和 伪 类 选择 器 等 。 


14.4.1 案例 一 一 标签 选择 器 


HTML 文档 由 多 个 不 同 标记 组 成 ， 而 CSS 选择 器 就 是 用 来 声明 那些 标记 采用 样式 。 例 如 
p 选择 器 ， 用 于 声明 页 面 中 所 有 <p> 标 记 的 样式 风格 。 同 样 也 可 以 通过 hl 选择 器 来 声明 页 面 
中 所 有 <hl> 标 记 的 CSS 风格 。 

标签 选择 器 最 基本 的 形式 如 下 : 


tagName {property:value} 


其 中 tagName 表示 标记 名 称 ， 例 如 p、hl 等 HTML 标记 ; proerty 表示 CSS 3 属性 ; 
value 表示 CSS 3 属性 值 。 

通过 一 个 具体 标记 来 命名 ， 可 以 对 文档 里 该 标记 出 现 的 每 一 个 地 方 用 样式 定义 。 这 种 做 
法 通常 用 在 设置 那些 在 整个 网 站 都 会 出 现 的 基本 样式 。 例 如 ， 下 面 的 定义 就 用 于 为 某 网 站 设 
置 默认 字体 。 


body, p, td, th, div, blockquote, dl, ul, ol { 
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
font-size: lem; 
color: #000000; 

来 


这 个 相当 长 的 选择 器 是 一 系列 的 标记 ， 所 有 这 些 标记 都 将 以 定义 的 样式 (字体 、 字 号 和 颜 
色 ) 显 示 。 理 论 上 ，< body > 标记 就 是 所 需要 的 全 部 (因为 所 有 其 他 标记 会 出 现在 《body〉 标记 
内 部 ， 并 且 将 因此 继承 它 的 属性 )， 但 是 许多 浏览 器 不 能 恰当 地 将 这 些 样式 属性 带 入 表格 和 其 
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他 元 素 里 。 因 此 ， 为 了 完整 ， 这 里 指定 了 其 他 元 素 。 
【 例 14.10】 (实例 文件 : chl4\14.10.htmD 标 签 选择 器 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<title> 标 签 选择 器 </title> 
<style> 
p{color:blue;font-size:20px;} 
</style> 

</head> 

<body> 

<p> 此 处 使 用 标签 选择 器 控制 段落 样式 </p> 
</body> 

</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 14-16 所 示 。 从 中 可 以 看 到 段落 以 蓝 色 字体 
显示 ， 大 小 为 20px。 
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此 处 使 用 标签 选择 器 控制 各 落 样 式 


图 14-16 标签 选择 器 显示 


如 果 在 后 期 维护 中 ， 需 要 调整 段落 颜色 ， 那 么 只 需 修改 color 属性 的 值 即 可 。 另 外 ，CSS 
3 语言 对 于 所 有 属性 和 值 都 有 严格 要 求 ， 如 果 声 明 的 属性 在 CSS 3 规范 中 没有 ， 或 者 某 个 属 
性 值 不 符合 属性 要 求 ， 那 么 都 将 不 能 使 CSS 语句 生效 。 


14.4.2 ”案例 一 一 类 选择 器 


在 一 个 页 面 中 ， 如 果 使 用 标签 选择 器 ， 就 会 控制 该 页 面 中 所 有 此 标记 的 显示 样式 。 如 果 
需要 为 此 类 标记 中 的 某 个 标记 重新 设 定 ， 此 时 仅 使 用 标签 选择 器 是 不 能 达到 效果 的 ， 还 需要 
使 用 类 (class) 选 择 器 。 

类 选择 器 用 来 为 一 系列 标记 定义 相同 的 呈现 方式 ， 常 用 语法 格式 如 下 : 


. classValue {property:value} 


classValue 是 选择 器 的 名 称 ， 具 体 名 称 由 CSS 制定 者 自己 命名 。 如 果 一 个 标记 具有 class 
属性 且 class 属性 值 为 classValue， 那 么 该 标记 的 呈现 样式 将 由 该 选择 器 指定 。 在 定义 类 选择 
符 时 ， 需 要 在 classValue 前 面 加 一 个 句点 (.)。 

使 用 示例 如 下 所 示 : 


.rd{color:red} 
ecttont size pry 


上 述 语句 定义 了 两 个 类 选择 器 ， 分 别 是 rd 和 se。 类 的 名 称 可 以 是 任意 英文 字符 串 或 以 英 
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文 开头 与 数字 的 组 合 ， 一 般 情况 下 ， 是 其 功能 及 效果 的 简要 缩写 。 
在 p 标记 的 class 属性 中 可 以 使 用 类 选择 符 ， 代 码 如 下 : 
<p class="rd">class 属性 是 被 用 来 引用 类 选择 器 的 属性 </p> 


在 前 面 定 义 的 选择 器 只 能 被 应 用 于 指定 的 标记 中 (例如 p 标记 )。 如 果 需 要 在 不 同 标记 中 使 
用 相同 的 呈现 方式 ， 则 代码 如 下 : 


<p class="rd"> 段 落 样式 </p> 
<h3 class="rd"> 标 题 样式 </h3> 


【 例 14.11】 (实例 文件 ，ch14\14.11.html) 类 选择 器 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head><title> 类 选择 器 </title> 
<style> 
-aaf 
color:blue; 
font-size:20px; 
1 
.bb{ 
color:red; 
font-size:22px; 
3. 
</style></head><body> 
<h3 class=bb> 学 习 类 选择 器 </h3> 
<p class="aa"> 此 处 使 用 类 选择 器 aa 控制 段落 样式 </p> 
<p class="bb"> 此 处 使 用 类 选择 器 bb 控制 段落 样式 </p> 
</body></html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 14-17 所 示 。 从 中 可 以 看 到 第 一 个 段落 以 蓝 


色 字 体 显示 ， 大 小 为 20px， 第 二 个 段落 以 红色 字体 显示 ， 大 小 为 22px， 标 题 也 以 红色 字体 显 
示 ， 大 小 为 22px。 
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学 习 类 选择 器 


此 处 使 用 类 选择 器 aa 控制 段落 样式 
此 处 使 用 类 选择 器 bb 控制 段落 样式 


图 14-17 类 选择 器 显示 效果 
14.4.3 ”案例 一 一 ID 选择 器 
ID 选择 器 和 类 选择 器 类 似 ， 都 是 针对 特定 属性 的 属性 值 进行 匹配 。ID 选择 器 定义 的 是 某 


一 个 特定 的 HIML 元 素 ， 一 个 网 页 文件 中 只 能 有 一 个 元 素 使 用 某 一 ID 的 属性 值 。 
定义 ID 选择 器 的 基本 语法 格式 如 下 : 


5@ 


JavaScript 动 态 网 站 开发 
案例 课 党 %… 


#idValue{property:value} 


在 上 述 基 本 语法 格式 中 ，idValue 是 选择 器 名 称 ， 可 由 CSS 定义 者 自己 命名 。 如 果菜 标记 
具有 id 属性 ， 并 且 该 属性 值 为 itValue， 那 么 该 标记 的 呈现 样式 将 由 该 ID 选择 器 指定 。 在 正 
常情 况 下 id 属性 值 在 文档 中 具有 唯一 性 。 

定义 JD 选择 器 ， 代 码 如 下 : 


#fontstyle 

{ 
color:red; 
font-weight:bold; 
font-size:large 


} 


在 页 面 中 ， 只 有 具有 ID 属性 的 标记 才能 够 使 用 ID 选择 器 定义 样式 ， 所 以 与 类 选择 器 相 
比 ， 使 用 ID 选择 器 具有 一 定 的 局 限 性 。 类 选择 器 与 ID 选择 器 主要 区 别 如 下 。 

(1) 类 选择 器 可 以 给 任意 数量 的 标记 定义 样式 ， 但 ID 选择 器 在 页 面 标记 中 只 能 使 用 
一 次 。 

(2) ID 选择 器 比 类 选择 器 更 具有 优先 级 ， 即 当 ID 选择 器 与 类 选择 器 发 生 冲 突 时 ， 优 先 
使 用 ID 选择 器 。 

【 例 14.12】 (实例 文件 ，ch14\14.12.htmDID 选择 器 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title>ID 选择 器 </title> 

<style> 

#fontstyle{ 
color:blue; 
font-weight:bold; 

时 

#textstyle{ 
color:red; 
font-size:22px; 


} 

</style> 

</head> 

<body> 

<h3 id=textstyle> 学 习 ID 选择 器 </h3> 

<p id=textstyle> 此 处 使 用 ID 选择 器 aa 控制 段落 样式 </p> 
<p id=fontstyle> 此 处 使 用 ID 选择 器 bb 控制 段落 样式 </p> 
</body> 

</html> 


上 述 代码 在 王 9.0 浏览 器 中 的 显示 效果 如 图 14-18 所 示 。 从 中 可 以 看 到 第 一 个 段落 以 红 
色 字 体 显示 ， 大 小 为 22px， 第 二 个 段落 以 红色 字体 显示 ， 大 小 为 22px， 标 题 同 样 以 蓝 色 字 体 
显示 ， 大 小 为 20px。 
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另外 ， 标 题 h3 和 第 一 个 段落 都 使 用 了 名 称 textstyle 的 ID 选择 器 ， 并 都 显示 了 CSS 方 
案 ， 由 此 可 知 在 很 多 浏览 器 中 ，ID 选择 器 可 以 用 于 多 个 标记 。 但 这 里 需要 指出 的 是 , 将 了 D 
选择 器 用 于 多 个 标记 是 错误 的 ， 因 为 每 个 标记 定义 的 ID 不 只 是 CSS 可 以 调用 ，JavaScript 等 
脚本 语言 同样 也 可 以 调用 。 如 果 一 个 HTML 中 有 两 个 相同 的 id 标记 ， 那 么 将 会 导致 JavaScript 
在 查找 id 时 出 错 ， 例 如 使 用 方法 getElementById0。 
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学 习 ID 选择 器 


此 处 使 用 ID 选择 器 aa 控制 段落 样式 
此 处 使 用 上 选择 器 bb 控制 段落 样式 


图 14-18 ID 选择 器 显示 效果 
14.4.4 ”案例 一 一 全 局 选择 器 


如 果 想 让 一 个 页 面 中 所 有 html 标记 使 用 同一 种 样式 ， 那 么 可 以 使 用 全 局 选择 器 来 实现 。 
全 局 选择 器 ， 顾 名 思 义 就 是 对 所 有 HTML 元 素 起 作用 。 其 语法 格式 如 下 : 


*{property:value} 


其 中 “*” 表 示 对 所 有 元 素 起 作用 ; property 表示 CSS3 属性 名 称 ，value 表示 属性 值 。 使 
用 示例 如 下 : 


*{margin:0; padding:0;} 


【 例 14.13】 (实例 文件 ，ch14\14.13.htmD) 全 局 选择 器 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head><title> 全 局 选择 器 </title> 
<style> 
之 
color:red; 
font-size:30px 
. 
</style></head> 
<body> 
<p> 使 用 全 局 选择 器 修饰 </p> 
<p> 第 一 段 </p> 
<h1> 第 一 段 标题 </h1> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 14-19 所 示 。 从 中 可 以 看 到 两 个 段落 和 标题 
都 以 红色 字体 显示 ， 大 小 为 30px。 
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14-19 ”全 局 选择 器 


14.4.5 ”案例 一 一 组 合 选择 器 


将 多 种 选择 器 进行 搭配 使 用 ， 就 构成 了 复合 选择 器 ， 也 称 组 合 选择 器 。 一 般 的 组 合 方式 
是 标签 选择 器 和 类 选择 器 组 合 ， 或 标签 选择 器 和 ID 选择 器 组 合 。 由 于 这 两 种 组 合 方式 的 原理 
和 效果 一 样 ， 所 以 下 面 只 介绍 标签 选择 器 和 类 选择 器 的 组 合 。 

组 合 选择 器 只 是 一 种 组 合 形式 ， 并 不 算是 一 种 真正 的 选择 器 ， 但 在 实际 中 经 常 使 用 。 使 
用 示例 如 下 : 


.orderlist 1i {} 
.tableset td {} 


在 使 用 的 时 候 一 般 将 组 合 器 用 在 重复 出 现 并 且 样 式 相同 的 标签 里 ， 例 如 i 列表 、td 单元 
格 、dd 自 定义 列表 等 。 使 用 示例 如 下 : 


hl.red {color: red} 
<hl class="red"></h1l> 


【 例 14.14】 (实例 文件 ，ch14\14.14.htmD) 组 合 选择 器 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 组 合 选择 器 </title> 
<style> 
pt{ 
color:red 
} 
p .firstPar{ 
color:blue 
3 
firstPar{ 
color:green 
1 
</style></head><body> 
<p> 这 是 普通 段落 </p> 
<p class="firstPar"> 此 处 使 用 组 合 选择 器 </p> 
<hl class="firstPar"> 我 是 一 个 标题 </h1> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 14-20 所 示 。 从 中 可 以 看 到 第 一 个 段落 的 颜 


色 为 红色 ， 采 用 的 是 p 标签 选择 器 ;第 二 段 的 颜色 是 蓝 色 ， 采 用 的 是 p 和 类 选择 器 组 合 的 选 
择 器 ;标题 Hl 的 颜色 是 绿色 ， 采 用 的 是 类 选择 器 。 
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这 是 理 通 自 洁 


此 处 使用 组 合议 择 矢 


我 是 一 个 标题 
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14-20 组合 选择 器 显示 效果 
14.4.6 ”案例 一 一 继承 选择 器 


继承 选择 器 的 规则 是 ， 子 标记 在 没有 定义 的 情况 下 所 有 的 样式 是 继承 父 标 记 的 ; 当 子 标 
记 重 复 定义 了 父 标 记 已 经 定义 过 的 声明 时 ， 子 标记 就 执行 后 面 的 声明 ; 子 标记 与 父 标记 不 冲 
突 的 地 方 仍然 沿用 父 标 记 的 声明 。 

使 用 继承 选择 器 必须 先 了 解 HTML 文档 树 和 CSS 继承 ， 这 样 才能 够 很 好 地 运用 继承 选择 
器 。 每 个 HTML 都 可 以 被 看 作 是 一 个 文档 树 ， 文 档 树 的 根部 就 是 HTML 标记 ， 而 head 和 
body 标记 就 是 其 子 元 素 。 在 head 和 body 里 的 其 他 标记 就 是 HTML 标记 的 孙子 元 素 。 整 个 
HTML 就 呈现 出 一 种 祖先 和 子孙 的 树 状 关系 。CSS 的 继承 是 指 子 孙 元 素 继承 祖先 元 素 的 某 些 
属性 。 

使 用 示例 如 下 : 

<div class="test"> 


<span><img src="xxx"” alt=" 示 例 图 片 "/></span> 
</div> 


对 于 上 面 层 而 言 ， 如 果 将 其 修饰 样式 改 为 以 下 代码 : 


.test span img {border:lpx blue solid;} 


则 表示 该 选择 器 先 找到 class 为 test 的 标记 ， 再 从 它 的 子 标记 里 查找 span 标记 ， 然 后 从 
span 的 子 标记 中 找到 IMG 标记 : 也 可 以 采用 下 面 的 形式 : 


div span img {border:lpx blue solid;} 


从 中 可 以 看 出 其 选择 规律 是 从 左 往 右 ， 依 次 细 化 ， 最 后 锁定 要 控制 的 标记 。 
【 例 14.15】 (实例 文件 ，ch14\14.15.html) 继 承 选择 器 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 继 承 选择 器 </title> 

<style type="text/css"> 

hli{color:red; text-decoration:underline;} 
hl strong{color:#004400; font-size:40px;} 
</style> 
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</head> 

<body> 

<h1> 测 试 css 的 <strong> 继 承 </strong> 效 果 </h1> 
<h1> 此 处 使 用 继承 <font> 选 择 器 </font> 了 么 ? </h1> 
</body> 

</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 14-21 所 示 。 从 中 可 以 看 到 第 一 个 段落 的 颜 
色 为 红色 ， 但 是 “继承 ”两 个 字 使 用 的 颜色 却 是 绿色 ， 且 字符 大 小 为 40px。 除 了 这 两 个 设置 
外 ， 其 他 的 CSS 样式 都 是 继承 父 标记 <h1> 的 样式 ， 例 如 下 划 线 设置 。 第 二 个 段落 ， 虽 然 使 用 
了 font 标记 修饰 选择 器 ， 但 其 样式 都 是 继承 且 父 类 标记 hl。 


此 处 使 用 继承 选择 器 了 么 ? 


图 14-21 继承 选择 器 显示 效果 
14.4.7 案例 一 一 伪 类 


伪 类 也 是 选择 器 的 一 种 ， 但 是 使 用 伪 类 定义 的 CSS 样式 并 不 作用 在 标记 上 ， 而 是 作用 在 
标记 的 状态 上 。 由 于 很 多 浏览 器 支持 不 同类 型 的 伪 类 ， 没 有 一 个 统一 的 标准 ， 所 以 很 多 伪 类 
都 不 常 被 用 到 。 伪 类 包括 :first-child、:link、:vistited、:hover、:active、:focus 和 :lang 等 。 其 
中 :link、:vistited、:hover 和 :active 等 超 链 接 的 伪 类 主流 浏览 器 都 支持 。 

伪 类 选择 符 定义 的 样式 常用 在 标记 <a> 上 ， 它 表示 链接 4 种 不 同 的 状态 : 未 访问 链接 
(link)、 已 访问 链接 (visited)、 激 活 链 接 (active) 和 上 鼠标 停留 在 链接 上 (hover)。 需 要 注意 的 是 ，a 
可 以 只 具有 一 种 状态 (:link)， 或 者 同时 具有 两 种 或 3 种 状态 。 例 如 ， 任 何 一 个 有 href 属性 的 a 
标签 ， 在 没有 任何 操作 时 都 已 具备 :link 的 条 件 ， 即 满足 有 链接 属性 这 个 条 件 ， 如 果 是 访问 过 
的 a 标记 ， 则 同时 会 具备 :link 和 :visited 两 种 状态 。 当 把 鼠标 移 到 访问 过 的 a 标记 上 的 时 
候 ，a 标记 就 同时 具备 了 :link、:visited、:hover 3 种 状态 。 

使 用 示例 如 下 : 


a:link{color:#FF0000; text-decoration:none} 
a:visited{color:#00FF00; text-decoration:none} 
a:hover{color:#0000FF; text-decoration:underline} 
a:active{color:#FFOO0FF; text-decoration:underline} 
En 上 述 样式 表示 该 链接 未 访问 时 颜色 为 红色 且 无 下 划 线 ; 在 被 访问 后 该 链接 变 
并 为 绿色 且 无 下 划 线 ; 在 被 激活 后 变 为 蓝 色 且 有 下 划 线 ; 当 和 鼠标 放 在 链接 上 变 为 紫 
色 且 有 下 划 线 。 


【 例 14.16】 (实例 文件 ，ch14\14.16.html) 伪 类 的 使 用 。 代 码 如 下 : 


全:20 


a 


| 
| 
第 
<!IDOCTYPE html> 也 
<html> 章 
<head> 级 
<title> 伪 类 </title> 联 
<style> 样 
a:link {color: red} /* 未 访问 的 链接 */ 式 
a:visited {color: green} /* 已 访问 的 链接 */ 表 
a:hover {color:blue} /* 鼠标 移动 到 链接 上 */ 
a:active {color: orange} /* 选 定 的 链接 */ 0 
</style> 
</head> 
<body> 


<a href=""> 链 接 到 本 页 </a> 

<a href="http://www.sohu.com"> 搜 狐 </a> 

</body> 

</html> 

上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 14-22 所 示 。 从 中 可 以 看 到 两 个 超级 链 
接 ， 第 一 个 超级 链接 是 鼠标 停留 在 其 上 ， 颜 色 显 示 为 蓝 色 ; 第 二 个 是 访问 过 后 ， 颜 色 显示 
为 绿色 。 
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图 14-22 伪 类 显示 效果 
14.4.8 ”案例 一 一 属性 选择 器 


在 前 面 的 小 节 中 使 用 CSS 3 样式 对 HTML 标记 的 修饰 ， 都 是 通过 HTML 标记 名 称 或 自 定 
义 名 称 指向 具体 的 HTML 元素， 进而 控制 HTML 标记 样式 。 除 此 之 外 ， 还 可 以 直接 使 用 属性 
控制 HTML 标记 样式 ， 这 种 方法 被 称 为 属性 选择 器 法 。 

属性 选择 器 根据 某 个 属性 是 否 存在 或 属性 值 寻找 元 素 ， 因 此 它 能 够 实现 某 些 非常 有 意思 
和 强大 的 效果 。 属 性 选择 器 最 初出 现在 CSS 2 中 , 在 CSS 3 中 ， 又 新 加 了 3 个 属性 选择 器 。 
在 现在 的 CSS 3 中 ， 共 有 7 个 属性 选择 器 ， 其 语法 格式 和 说 明 如 表 14-1 所 示 。 


表 14-1 常见 的 属性 选择 器 


属性 选择 器 语法 格式 
选择 匹配 E 的 元 素 ， 且 该 元 素 定义 了 foo 属性 。 注 意 ，E 选择 器 可 以 省 略 ， 
表示 选择 定义 了 foo 属性 的 任意 类 型 元 素 

选择 匹配 E 的 元 素 ， 且 该 元 素 将 foo 属性 值 定义 为 “bar”。 注 意 ，E 选择 器 
可 以 省 略 ， 用 法 与 上 一 个 选择 器 类 似 


El[foo] 


E[foo= "bar "] 
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续 表 


属性 选择 器 语法 格式 说 明 

选择 匹配 E 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 值 是 一 个 以 空格 符 分 

隔 的 列表 ， 其 中 一 个 列表 的 值 为 “bar”。 注 意 ，E 选择 符 可 以 省 略 ， 表 示 可 

E[foo~= "bar "] 以 匹配 任意 类 型 的 元 素 

例如 ，af[title~="bl"] 匹 配 <a title="bl b2 b3"></a>， 而 不 匹配 <a title="b2 b3 

b5"> </a> 

选择 匹配 E 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 值 是 一 个 用 连 字符 (-) 

分 隔 的 列表 ， 值 开头 的 字符 为 "en"。 注 意 ，E 选择 符 可 以 省 略 ， 表 示 可 以 匹配 

E[fool="en"] 任意 类 型 的 元 素 

例如 ，[lang|="en"] 匹 配 <body lang="en-us"></body> ， 而 不 是 匹配 <body 
lang="f-ag"></body> 

选择 匹配 E 的 元 素 ， 且 该 元 素 定 义 了 foo 属性 ，foo 属性 值 包含 了 前 级 为 "bar" 

的 子 字符 串 。 注 意 ，E 选择 符 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 。 

例如 ，body[lang^="en"] 与 <body lang="en-us"></body> 匹 配 ， 而 与 <body 

lang="f-ag"></body> 不 匹配 

选择 匹配 E 的 元 素 ， 且 该 元 素 定 义 了 foo 属性 ，foo 属性 值 包含 后 缀 为 "bar" 的 

E[foo$="bar"] 子 字符 串 。 注 意 ，E 选择 符 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 

例如 ，img[src$="jpg"] 与 <img src="p.jpg"/> 匹 配 ， 而 与 <img src="p.gif"> 不 匹配 


E[foo^="bar"] 


选择 匹配 E 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 值 包含 "b" 的 子 字符 
E[foo*="bar"] 串 。 注 意 ，E 选择 器 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 
例如 ，img[src$="jpg"] 与 <img src="p.jpg/> 匹 配 ， 而 与 <img src="p.gif"/> 不 匹配 


【 例 14.17】 (实例 文件 ，ch14\14.17.html) 属 性 选择 器 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 属 性 选择 器 </title> 

<style> 

[align] {color:red} 

[align="left"] {font-size:20px;font-weight:bolder;} 
[lang^="en"] {color:blue;text-decoration:underline;} 
[src$="gif"] {border-width:S5px;boder-color:#ff9900} 
</style> 

</head> 

<body> 

<p align=center> 这 是 使 用 属性 定义 样式 </p> 

<p align=left> 这 是 使 用 属性 值 定义 样式 </p> 

<p lang="en-us"> 此 处 使 用 属性 值 前 缀 定义 样式 </p> 

<p> 下 面 使 用 了 属性 值 后 缀 定义 样式 

<img src="2.gif" border="1"/> 

</body> 

</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 14-23 所 示 。 从 中 可 以 看 到 第 一 个 段落 使 用 
属性 align 定义 样式 ， 其 颜色 为 红色 。 第 二 个 段落 使 用 属性 值 left 修饰 样式 ， 并 且 大 小 为 
20px， 字 符 加 粗 显 示 ， 其 颜色 为 红色 ， 这 是 因为 该 段落 使 用 了 align 属性 。 第 三 个 段落 显示 红 
色 ， 且 带 有 下 划 线 ， 这 是 因为 属性 lang 的 值 前 级 为 en9。 最 后 一 个 图 片 ， 以 边框 样式 显示 ， 这 


是 因为 属性 值 后 级 为 gif。 


14.4.9 ”案例 


结构 伪 类 是 CSS 3 新 增 的 类 型 选择 器 。 顾 名 思 义 ， 结 构 伪 类 就 是 利用 文档 结构 树 (DOM) 
实现 元 素 过 滤 ， 即 通过 文档 结构 的 相互 关系 匹配 特定 的 元 素 ， 从 而 减少 文档 内 对 class 属性 和 


文件 月 ” 媚 和 旧 ”到 看 (| 内， 工具 m 末 吉 站 


洲 关 菲 淹 注 才 bp 小 上 二 
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这 是 使 用 属性 定义 样式 
这 是 使 用 属性 值 定义 样式 
此 处 使 用 属性 值 前 经 主义 样 式 


下 面 使 用 了 属性 值 后 授 定 义 样式 国 


下 100% 


图 14-23 属性 选择 器 显示 


结构 伪 类 选择 器 


ID 属性 的 定义 ， 使 得 文档 更 加 简洁 。 
在 CSS 3 版 本 中 ， 新 增 的 结构 伪 类 选择 器 如 表 14-2 所 示 。 


表 14-2 新 增 的 结构 伪 类 选择 器 


选择 器 


E:root 


E:nth-last-child(n) 


IGG 


含义 


匹配 文档 的 根 元 素 ， 对 于 HTML 文档 ， 就 是 HTML 元 素 


E:nth-child(n) 匹配 其 父 元 素 的 第 n 个 子 元 素 ， 第 一 个 编号 为 1 
匹配 其 父 元 素 的 倒数 第 n 个 子 元 素 ， 第 一 个 编号 为 1 


E:nth-of-type(n) 与 :nth-child0 作 用 类 似 ， 但 是 仅 匹 配 使 用 同 种 标签 的 元 素 

E:nth-last-oftype(n) | 与 :nth-lastchild0 作 用 类 似 ， 但 是 仅 匹配 使 用 同 种 标签 的 元 素 

E:last-child 匹配 父 元 素 的 最 后 一 个 子 元 素 ， 等 同 于 :nth-last-child(1) 

E:first-of-type 匹配 父 元 素 下 使 用 同 种 标签 的 第 一 个 子 元 素 ， 等 同 于 :nth-of-type(1) 

E:last-of-type 匹配 父 元 素 下 使 用 同 种 标签 的 最 后 一 个 子 元 素 ， 等 同 于 :nth-last-of-type(1) 
匹配 父 元 素 下 仅 有 的 一 个 子 元 素 ， 等 同 于 :first-child:last-child 或 :nth-child(1):nth- 

E:only-child 


匹配 父 元 素 下 使 用 同 种 标签 的 唯一 一 个 子 元 素 ， 等 同 于 :first-of-type:last-of-type 


pee 或 :nth-of-type(1):nth-last-of-type(1) 
E:empty 匹配 一 个 不 包含 任何 子 元 素 的 元 素 。 注 意 ， 文 本 节点 也 被 看 作 子 元 素 
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【 例 14.18】 (实例 文件 ，ch14\14.18.html) 结 构 伪 类 选择 器 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head><title> 结 构 伪 类 </title> 

<style> 

tr:nth-child(even){ 

background-color:#f5fafe 

. 

tr:last-child{font-size:20px;} 

</style> 

</head> 

<body> 

<table border=1 width=80%> 

<th> 姓 名 </th><th> 编 号 </th><th> 性 别 </th> 

<tr><td> 刘 海松 </td><td>006</td><td> 男 </td></tr> 
<tr><tqd> 王 峰 </td><td>001</td><tqd> 女 </td></tr> 
<tr><td> 李 张力 </td><td>002</td><td> 男 </td></tr> 
<tr><td> 于 辉 </td><td>008</td><td> 男 </td></tr> 
<tr><td> 张 浩 </td><td>004</td><tqd> 女 </td></tr> 
<tr><td> 刘 永 权 </td><td>003</td><td> 男 </td></tr> 
</table> 

</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 14-24 所 示 。 从 中 可 以 看 到 表格 中 奇数 行 显 
示 的 是 指定 颜色 ， 并 且 最 后 一 行 字体 以 20px 显示 ， 其 原因 就 是 采用 了 结构 伪 类 选择 器 。 
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14-24 ”结构 伪 类 选择 器 显示 效果 
14.4.10 ”案例 一 一 UI 元素 状态 伪 类 选择 器 


UI 元 素 状态 伪 类 (The UI element states pseudo-classes) 也 是 CSS 3 的 新 增 选 择 器 。UI 即 
User Interface( 用 户 界面 ) 的 简称 。UI 设计 是 指 对 软件 的 人 机 交互 、 操 作 逻 辑 、 界 面 美观 的 整体 
设计 。 好 的 UI 设计 不 仅 能 让 软件 变 得 有 个 性 、 有 品位 ， 还 能 让 软件 的 操作 变 得 舒适 、 简 单 、 
自由 ， 充 分 体现 软件 的 定位 和 特点 。 

UI 元 素 的 状态 一 般 包 括 可 用 、 不 可 用 、 选 中 、 未 选中 、 获 取 焦 点 、 失 去 焦点 、 锁 定 、 待 
机 等 。CSS 3 定义 了 3 种 常用 的 状态 伪 类 选择 器 ， 详 细 说 明 如 表 14-3 所 示 。 


第 

表 14-3 ”状态 伪 类 选择 器 习 

选 择 器 说 明 网 

选择 匹配 E 的 所 有 可 用 UI 元素 。 注 意 ， 在 网 页 中 ，UI 元 素 一 般 是 指 包含 在 form 元 素 样 

E:enabled 内 的 表单 元 素 。 例 如 与 input:enabled <form><input type=text/><input type=buttion . 
disabled=disabled/></form> 中 的 文本 框 匹配 ， 而 不 匹配 该 代码 中 的 按钮 

选择 匹配 E 的 所 有 不 可 用 元 素 。 注 意 ， 在 网 页 中 ，UI 元 素 一 般 是 指 包 含 在 form 元 素 员 


E:disabled 内 的 表单 元 素 。 例 如 ，input:disabled 与 <form><input type=text/><input type=buttion 
disabled=disabled/></form> 中 的 按钮 匹配 ， 而 不 匹配 该 代码 中 的 文本 框 

选择 匹配 E 的 所 有 可 用 UI 元素 。 注 意 ， 在 网 页 中 ，UI 元 素 一 般 是 指 包 含 在 form 元 素 
E:checked 内 的 表单 元 素 。 例 如 ，input:checked ， 与 <form><input type=checkbox/><input 
type=radio checked=checked/><./form> 中 的 单 选 按钮 匹配 ， 但 不 匹配 该 代码 中 的 复 选 杠 


【 例 14.19】 (实例 文件 :chl4\14.19.htmDUI 元 素 状态 伪 类 选择 器 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title>UI 元 素 状态 伪 类 选择 器 </title> 

<style> 

input:enabled { border:lpx dotted #666; background:#ff9900; } 
input:disabled { border:lpx dotted #999; background:#F2F2F2; } 
</style> 

</head> 

<body> 

<center> 

<h3 align=center> 用 户 登录 </h3> 

<form method="post" action=""> 


GG 


用 户 名 : <input type=text name=name><br> 

密 gnbsp; gnbsp; 码 : <input type=password name=pass disabled="disabled"><br> 
<input type=submit value= 提 交 > 

<input type=reset value= 重 置 > 

</form> 

<center> 

</body> 

</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 14-25 所 示 。 从 中 可 以 看 到 表格 中 可 用 的 表 
单元 素 的 颜色 都 显示 为 浅黄 色 ， 而 不 可 用 元 素 的 颜色 都 显示 为 灰色 。 
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14-25 ”UI 元 素 状态 伪 类 选择 器 应 用 效果 


14.5 ”选择 器 声明 


使 用 CSS 选择 器 可 控制 HTML 标记 样式 ， 其 中 每 个 选择 器 属性 可 以 一 次 声明 多 个 ， 即 创 
建 多 个 CSS 属性 修饰 HTML 标记 。 实 际 上 也 可 以 直接 将 选择 器 声明 多 个 ， 并 且 任 何 形式 的 选 
择 器 (如 标记 选择 器 、class 类 别 选择 器 、ID 选择 器 等 ) 都 是 合法 的 。 


14.5.1 案例 一 一 集体 声明 


在 一 个 页 面 中 ， 有 时 需要 使 不 同 种 类 的 标记 样式 保持 一 致 ， 例 如 需要 使 p 标记 和 hl 字体 
保持 一 致 ， 此 时 可 以 让 p 标记 和 hl 标记 共同 使 用 类 选择 器 。 除 了 这 个 方法 之 外 ， 还 可 以 使 用 
集体 声明 方法 。 集 体 声明 就 是 在 声明 各 种 CSS 选择 器 时 ， 如 果 某 些 选 择 器 的 风格 是 完全 相同 
的 ， 或 者 部 分 相同 ， 可 以 将 风格 相同 的 CSS 选择 器 同时 声明 。 

【 例 14.20】 (实例 文件 ，ch14\14.20.html) 集 体 声 明 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 集 体 声明 </title> 
<style type="text/css"> 
hl,h2,p{ 
color:red; 
font-size:20px; 
font-weight:bolder; 
</style></head><body> 
<h1> 此 处 使 用 集体 声明 </h1> 
<h2> 此 处 使 用 集体 声明 </h2> 
<p> 此 处 使 用 集体 声明 </p> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 14-26 所 示 。 从 中 可 以 看 到 网 页 上 的 标题 1、 
标题 2 和 段落 的 颜色 都 以 红色 显示 ， 且 字体 加 粗 显 示 ， 并 且 大 小 为 20px。 


图 14-26 ”集体 声明 显示 效果 


14.5.2 ”案例 一 一 多 重 嵌 套 声明 


在 CSS 控制 HTML 标记 样式 时 ， 还 可 以 使 用 层 层 递 进 的 方式 ， 即 嵌 套 方式 ， 对 指定 位 置 
的 HTML 标记 进行 修饰 。 例 如 ， 当 <p> 与 </p> 之 间 包 含 “<a>...</a>” 标 记 时 ， 就 可 以 使 用 这 
种 方式 对 HTML 标记 修饰 。 

【 例 14.21】 (实例 文件 ，chl4\14.21.htmD 多 重 嵌 套 声明 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 多 重典 套 声明 </title> 

<style> 

p{font-size:20px;} 

p a{color:red;font-size:30px;font-weight:bolder;} 
</style></head><body> 

<p> 这 是 一 个 多 重典 套 <a href=""> 测 试 </a></p> 
</body> 

</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 14-27 所 示 。 从 中 可 以 看 到 在 段落 中 ， 只 有 
超级 链接 的 颜色 为 红色 ， 字 体 大 小 为 30px， 其 原因 是 使 用 了 嵌 套 声明 。 


图 14-27 多 重 嵌 套 声明 显示 效果 
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14.6 ”实战 演练 一 一 制作 五 彩 标题 


使 用 CSS， 可 以 给 网 页 标题 设置 不 同 的 字体 样式 。 
本 实例 要 求 使 用 标记 hl 创建 一 个 标题 ， 然 后 使 用 CSS 样式 对 标题 进行 修饰 ， 可 以 从 颜 
色 、 尺 寸 、 字 体 、 背 景 、 边 框 等 方面 入 手 。 实 例 完成 后 ， 其 效果 如 图 14-28 所 示 。 


RE Bo-cn 
关 五 5 x 


文件 (D。 编 吉 (E) ”这 看 (V) 收藏 夫 (A) 工具 (1 帮助 (H) 


a 图 14-28 五 彩 标题 显示 效果 


具体 实现 步骤 如 下 。 
构建 HTML 页 面 。 


创建 HIML 页 面 ， 完 成 基本 框架 并 创建 标题 。 其 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<title> 五 彩 标题 </title> 
</head> 

<body> 

<body> 

<hl> 

<span class=cl> 美 </span> 
<span class=c2> 食 </span> 
<span class=c3> 介 </span> 
<span class=c4> 绍 </span></h1l> 
</body> 

</html> 


上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 14-29 所 示 。 从 中 可 以 看 到 标题 hl 在 网 页 中 
的 显示 没有 任何 修饰 。 

使 用 内 嵌 样 式 。 

如 果 要 对 hl 标题 进行 修饰 ， 需 要 添加 CSS。 本 步骤 使 用 内 嵌 样 式 ， 在 <head> 标 记 中 添加 
CSS， 其 代码 如 下 : 


<style> 
hl {3 
</style> 
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上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 14-30 所 示 。 从 中 可 以 看 到 文字 在 网 页 中 的 
显示 效果 没有 任何 变化 。 
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美食 介绍 


美食 介绍 


图 14-29 ”标题 显示 效果 图 14-30 引入 style 标记 显示 效果 


TE 改变 污 色 、 字 体 和 尺寸 。 
添加 CSS 代码 ， 改 变 标题 样式 。 其 代码 如 下 : 
Wk 

font-family: Arial, sans-serif; 
font-size: 24px; 

color: #369; 

} 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 14-31 所 示 。 从 中 可 以 看 到 文字 的 颜色 为 浅 
蓝 色 ， 字 体 为 Arial。 

EY 加 入 灰色 边框 。 

为 hl 标题 加 入 边框 ， 其 代码 如 下 : 


padding-bottom: 4px; 
border-bottom: 2px solid #ccc; 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 14-32 所 示 。 从 中 可 以 看 到 “美食 介绍 ” 文 
字 下 面 ， 添 加 了 一 个 边框 。 


(Oowsapenm ap- o] oO es | 
< 上 


i | 
图 14-31 添加 文本 修饰 标记 图 14-32 ”添加 边框 样式 
本 于 BY 增加 背景 图 。 


使 用 CSS 样式 为 标记 <h1> 添 加 背景 图 片 ， 其 代码 如 下 : 
background: url(01.jpg) repeat-x bottom; 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 14-33 所 示 。 从 中 可 以 看 到 “美食 介绍 ” 文 
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字 下 面 ， 添 加 了 一 个 背景 图 片 ， 图 片 在 水 平 CO 轴 方向 上 为 平 铺 状态 。 
区 了 BY 定义 标题 宽度 。 
使 用 CSS 属性 ， 将 标题 变 小 ， 使 其 正好 符合 4 个 文字 的 宽度 。 其 代码 如 下 : 


width:140px; 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 14-34 所 示 。 从 中 可 以 看 到 “美食 介绍 ” 文 
字 下 面 背 景 图 缩短 了 ， 正 好 和 文字 宽度 相同 。 

定义 字体 颜色 。 

在 CSS 样式 中 ， 为 每 个 字 定义 颜色 ， 其 代码 如 下 : 


NN 区 二 有 | 
NN color: #B3EE3A; 
\ 


SN .c2{ 
PN color:#71C671; 
SN } 
SN ea 
color: #00FS5FF; 
| 
color:#00EE00; 
NS } 
NN 上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 14-35 所 示 。 从 中 可 以 看 到 每 个 字体 显示 着 


AN 不 同 的 颜色 ， 加 上 背景 色 共 有 5 种 颜色 。 
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图 14-33 ”添加 背景 效果 图 14-34 ”定义 宽度 效果 图 14-35 ”定义 文字 颜色 效果 


14.7” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: CSS 编写 工具 的 使 用 。 

练习 2: 在 HTML 中 使 用 CSS 的 方法 。 
练习 3: CSS 选择 器 的 使 用 。 

练习 4: CSS 选择 器 声明 的 应 用 。 
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14.8 高 手 甜 点 


甜点 1: 使 用 CSS 定义 的 字符 在 不 同 的 浏览 器 中 显示 的 大 小 一 样 吗 ? 


使 用 font-size:14px 定义 的 宋体 字符 ， 在 正 9.0 浏览 器 中 的 实际 高 是 16px， 空 白 是 3px， 
而 该 字符 在 Firefox 浏览 器 中 的 实际 高 是 17px， 上 空 lpx， 下 空 3px。 解 决 这 种 问题 的 办 法 是 
在 文字 定义 时 设 定 line-height， 并 确保 所 有 文字 都 有 默认 的 line-height 值 。 


甜点 2: CSS 在 网 页 制作 中 一 般 有 4 种 用 法 ， 那 么 具体 使 用 时 该 采用 哪 种 用 法 呢 ? 


当 有 多 个 网 页 要 用 到 CSS 时 ， 采 用 外 连 CSS 文件 的 方式 ， 这 样 可 大 大 减少 网 页 代码 ， 修 
改 起 来 非常 方便 ， 只 在 单个 网 页 中 使 用 的 CSS， 采 用 文档 头 部 方式 ， 只 有 在 一 个 网 页 一 两 个 
地 方才 用 到 的 CSS， 采 用 行内 插入 方式 。 


甜点 3: CSS 的 行内 样式 、 内 嵌 样 式 和 链接 样式 可 以 在 一 个 网 页 中 混用 吗 ? 


3 种 用 法 可 以 混用 ， 且 不 会 造成 混乱 。 这 就 是 它 为 什么 被 称 之 为 “ 层 合 样式 表 ” 的 原因 。 
浏览 器 在 显示 网 页 时 是 这 样 处 理 的 ， 先 检查 有 没有 行内 插入 式 CSS， 有 就 执行 ， 针 对 本 句 的 
其 他 CSS 就 不 去 管 它 了 ; 其 次 检查 内 嵌 方 式 的 CSS， 有 就 执行 了 ; 在 前 两 者 都 没有 的 情况 
下 再 检查 外 连 文件 方式 的 CSS。 因 此 3 种 CSS 的 执行 优先 级 是 : 行内 样式 、 内 婴 样 式 、 链 
接 样式 。 
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Tipt 是 一 种 脚本 语言 ， 
ript 的 程序 和 样式 表 的 静态 效果 结 


二 者 都 在 浏览 器 上 解析 并 运行 。 样 式 表 


JavaScript 和 样式 表 有 一 个 共同 特点 ， 


可 以 设置 网 页 的 样式 和 布局 ， 增 加 
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15.1 DHTML 简介 


DHTML， 又 称 动态 HTML， 它 并 不 是 一 门 独立 的 新 语言 。 通 常 来 说 ，DHTML 是 
JavaScript、HTML DOM、CSS 以 及 HTML/XHTML 的 结合 。DHTML 是 一 种 制作 网 页 的 方 
式 ， 而 不 是 一 种 网 络 技术 (就 像 JavaScript 和 ActiveX); 它 也 不 是 一 个 标记 、 一 个 插件 或 浏览 
器 。 它 可 以 通过 JavaScript、VBScript、HTML DOM、Layers 或 CSS 来 实现 。 这 里 需要 注意 
的 是 ， 同 一 效果 的 DHTML 在 不 同 的 浏览 器 中 被 实现 的 方式 是 不 同 的 。 

DHTML 由 以 下 3 部 分 内 容 构 成 。 

(1) 客户 端 脚本 语言 。 

使 用 客户 端 脚本 语言 (例如 JavaScript 和 VBScripb 来 改变 HIML 代码 有 很 长 一 段 时 间 了 。 
当 用 户 把 鼠标 放 在 一 幅 图 片上 时 ， 该 幅 图 片 改变 了 显示 效果 ， 那 么 它 就 是 一 个 DHTML 的 例 
子 。Microsoft 和 Netscape 浏览 器 都 允许 用 户 使 用 脚本 语言 去 改变 HTML 语言 中 大 多 数 的 元 
素 ， 而 这 些 能 够 被 脚本 语言 改变 的 页 面 元 素 被 称 为 文本 对 象 模型 (Document Object Model)。 

(2) DOM。 

DOM 是 DHTML 中 的 核心 内 容 ， 它 使 得 HTML 代码 能 够 被 改变 。DOM 中 包括 一 些 有 关 
环境 的 信息 。 例 如 : 当前 时 间 和 日 期 、 浏 览 器 版 本 号 、 网 页 URL， 以 及 HTML 中 的 元 素 标 
记 。 将 这 些 DOM 开放 给 脚本 语言 ， 浏 览 器 就 允许 用 户 改变 这 些 元 素 了 。 相 对 来 说 ， 还 有 一 
些 元 素 不 能 被 直接 改变 ， 但 是 用 户 能 通过 使 用 脚本 语言 改变 一 些 其 他 元 素来 改变 它们 。 

在 DOM 中 有 一 部 分 内 容 ， 专 门 用 来 指定 什么 元 素 能 够 改变 ， 它 就 是 事件 模型 。 所 谓 事 
件 就 是 把 鼠标 放 在 一 个 页 面 元 素 上 (onmouseoven ， 加 载 一 个 页 面 (onload)， 提 交 一 个 表单 
(onsubmit)， 在 表单 文字 的 输入 部 分 ， 用 鼠标 单 击 一 下 (onfocus) 等 。 

GY) CSS. 

脚本 语言 能 够 改变 CSS 中 的 一 些 属性 。 通 过 改变 CSS， 使 用 户 能 够 改变 页 面 中 的 许多 显 
示 效 果 。 这 些 效 果 包 括 颜 色 、 字 体 、 对 齐 方式 、 位 置 以 及 像素 。 


15.2 ”前 台 动 态 网 页 效果 


JavaScript 和 CSS 的 结合 运用 ， 是 喜爱 网 页 特效 浏览 者 的 一 大 喜讯 。 作 为 一 个 网 页 设计 
者 ， 通 过 对 JavaScript 和 CSS 的 学 习 ， 可 以 创作 出 大 量 的 网 页 特效 。 例 如 动态 内 容 、 动 态 样 


式 等 。 
15.2.1 案例 一 一 动态 内 容 


JavaScript 和 CSS 相 结 合 ， 可 以 动态 地 改变 HTML 页 面 元 素 内 容 和 样式 。 这 种 效果 是 
JavaScript 常用 的 功能 之 一 。 其 实现 也 比较 简单 ， 需 要 利用 innerHTML 属性 。 

几乎 所 有 的 元 素 都 有 innerHTML 属性 。 它 是 一 个 字符 串 ， 用 来 设置 或 获取 位 于 对 象 起 始 
和 结束 标签 内 的 HTML。 


全 


【 例 15.1】 (实例 文件 ，ch15\15.1.html) 创 建 动 态 内 容 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 改 变 内 容 </title> 

<script type="text/javascript"> 

function changeit(){ 
Var html=document .getElementById("content"); 
Var htmll=document getElementById ("content1"); 
Var t=document .getElementById("tt"); 
Var temp="<br><style>#abc {color:red;font-— 

size:36px;}</style>"+html .innerHTML; 
htmll.innerHTML=temp; 
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} 

</script> 

</head> 

<body> 

<div id="content"> 
<div id="abc"> 

视 祖国 生日 快乐 ! 

</div> 

</div> 

<div id="content1"> 
</div> 

<input type="button"” onclick="changeit()" value=" 改 变 HTML 内 容 "> 
</body> 

</html> 


在 上 述 HTML 代码 中 ,创建 了 几 个 DIV 层 ， 层 下 面 有 一 个 按钮 ， 并 且 为 按钮 添加 了 一 个 
单 击 事件 ， 即 调用 changeit 函数 。 在 函数 changeit 中 ， 首 先 使 用 getElementById0 方 法 获取 
HTML 对 象 ， 再 使 用 innerHTML 属性 设置 htmll 层 的 显示 内 容 。 

上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 15-1 所 示 。 在 显示 页 面 中 ， 有 一 个 段落 和 按 
钮 。 当 单 击 该 按钮 时 ， 会 显示 出 如 图 15-2 所 示 的 窗口 ， 从 中 可 以 看 出 段落 内 容 和 样式 发 生 了 
变化 ， 即 增加 了 一 个 段落 ， 并 且 字 号 变 大 ， 颜 色 为 红色 。 


IGG 


ee 祝 祖国 生日 快乐 ! 


国生 日 快乐 ! 


15-1 动态 内 容 显示 前 15-2 ”动态 内 容 显 示 后 


15.2.2 ”案例 一 一 动态 样式 


JavaScript 不 但 可 以 改变 动态 内 容 ， 还 可 以 根据 需要 动态 地 改变 HTML 元素 的 显示 样式 ， 
例如 显示 大 小 、 颜 色 和 边框 等 。 其 改变 方法 是 首先 需要 获取 要 改变 的 HIML 对 象 ， 然 后 利用 
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案例 课堂 > 


对 象 的 相关 样式 属性 设 定 不 同 的 显示 样式 。 


在 实现 过 程 中 ， 需 要 利用 styleSheets 属性 、rules 属性 和 CSSRules 属性 。 属 性 styleSheets 


表示 当前 HTML 网 页 上 的 样式 属性 集合 ， 可 以 以 数组 形式 获取 ; 属性 rules 表示 是 第 几 个 选 
择 器 ;属性 cssRules 表示 是 第 几 条 规则 。 


【 例 15.2】 
(1) (实例 文件 ，ch15\15.2.html) 创 建 动态 样式 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<link rel="stylesheet" type="text/css" href="15.2.css" /> 
<script> 

function fnInit()1{ 

// 访问 stylesheet 中 的 一 条 规则 ， 将 其 backgroundcolor 改 为 蓝 色 。 
Var OoStyleSheet=document .styleSheets[0]7 
Var oRule=oStyleSheet.rules[0]; 
oRule.style.backgroundColor="#0000FF"; 
oRule.style.width="200px"; 
oRule.style.height="]120px"; 

1 

</script> 

<title> 动 态 样式 </title> 

</head> 

<body> 

</HEAD> 

<div class="class1"> 

我 会 改变 颜色 

</div> 

<a href=# onclick="fnInit () "> 改变 背景 色 </a> 
<body> 

</html> 


上 述 HTML 代码 定义 了 一 个 DIV 层 ， 其 样式 规则 为 class1， 然 后 创建 了 一 个 超级 链接 ， 


并 且 为 超级 链接 定义 了 一 个 单 击 事件 ， 当 该 链接 被 单 击 时 会 调用 和 Init 函数 。 在 fnInit 函数 


中 ， 


首先 使 用 document.styleSheets[0] 语 句 获 取 当 前 的 样式 规则 集合 ， 然 后 使 用 rules[0] 获 取 第 


一 条 样式 规则 元 素 ， 最 后 使 用 oRule.style 对 象 分 别 设置 背景 色 、 宽 度 和 高 度 样式 。 


接 。 


(2) (实例 文件 ，ch15\15.2.css) 样 式 选择 器 定义 文件 。 代 码 如 下 : 


.Classl 

{ 

width:100px; 
background-color:red; 
height:80px; 

和 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 15-3 所 示 ， 网 页 显示 了 一 个 DIV 层 和 超级 链 
当 单 击 超级 链接 时 ， 会 显示 如 图 15-4 所 示 的 页 面 ， 此 时 DIV 层 背景 色 变 为 蓝 色 ， 并 且 层 


高 度 和 宽度 变 大 。 


四 加 
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图 15-3 动态 样式 改变 前 图 15-4 动态 样式 改变 后 


15.2.3 ”案例 一 一 动态 定位 


JavaScript 程序 结合 CSS 样式 属性 ， 可 以 动态 地 改变 HTML 元 素 所 在 的 位 置 。 其 实现 方 
法 是 使 用 新 的 元 素 属性 pixelLeft 和 pixelTop， 重 新 设 定 当前 HTML 元 素 的 坐标 位 置 。 其 中 
pixelLeft 属性 返回 定位 元 素 左 边界 偏 移 量 的 整数 像素 值 ， 那 是 因为 属性 的 非 像素 值 返回 的 是 
包含 单位 的 字符 串 ， 例 如 30px。 利 用 该 属性 可 以 单独 处 理 以 像素 为 单位 的 数值 。pixelTop 属 
性 以 此 类 推 。 

【 例 15.3】 (实例 文件 ，ch15\15.3.html) 动 态 定 位 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 

<head> 

<style type="text/css"> 
#dl1 { 

position: absolute; 
width: 300px; 
height: 300px; 
visibility: visible; 
color: #fff; 
background: #555; 
#d2 { 

position: absolute; 
width: 300px; 
height: 300px; 
Visibility: visible; 
color: #fff; 
background: red; 

: 

#d3 { 

position: absolute; 
width: 150px; 
height: 150px; 
Visibility: visible; 
color: #fff; 
background:blue; 
</style> 
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<script> 

var dlr dd2r d3e we Hy 

window.onload = function() { 

dl = document .getElementById('d1'); 


d2 = document .getElementById('d2'); 
d3 = document .getElementById('d3'); 
w = window.innerWidth; 
h = window.innerHeight; 


function divMoveTo(d, x, y) { 
d.style.pixelLeft = x; 
d.style.pixelTop = Y7 

3 

function divMoveBy(d, dx, dy) I{ 
d.style.pixelLeft += dx; 
d.style.pixelTop += dy; 

3. 

</script> 

</head> 

<body id="bodyId"> 

<form name="forml"> 
<h3> 移 动 定位 </h3> 

<p> 

<input type="button" value=" 移 动 d2" onclick="divMoveBy (d2,100,100)"><br> 
<input type="button" value=" 移 动 d3 到 d2 (0,0)" 
onclick="divMoveTo(d3,0,0)"><br> 
<input type="button"” value=" 移 动 d3 到 d2 (75,75)" 
onclick="divMoveTo(d3,75,75)"><br> 
</p> 

</form> 

<div id="dl"> 

<b>d1l</b> 

</div> 

<div id="d2"> 

<b>d2</b><br><br> 

d2 包含 d3 

<div icd="03"> 

<b>d3</b><br><br> 

d3 是 d2 的 子 层 

</div> 

</div> 

</body> 

</html> 


在 上 述 HTML 代码 中 ， 首 先 定义 了 3 个 按钮 ， 并 为 3 个 按钮 分 别 添加 了 不 同 的 单 击 事 
件 ， 即 可 以 调用 不 同 的 JavaScript 函数 。 然 后 定义 了 3 个 DIV 层 ; dl、d2 和 d3。 其 中 d3 是 
d2 的 子 层 。 在 style 标记 中 ， 分 别 使 用 ID 选择 器 定义 了 3 个 层 的 显示 样式 ， 例 如 绝对 定位 、 
是 否 显示 、 背 景色 、 宽 度 和 高 度 。 在 JavaScript 代码 中 ， 使 用 window.onload = function0 语 句 
表示 页 面 加 载 时 执行 该 函数 ， 函 数 内 使 用 getElementById 语句 获取 不 同 的 DIV 对 象 。 在 
divMoveTo 函数 和 divMoveBy 函数 内 ， 都 重新 定义 了 新 的 坐标 位 置 。 

上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 15-5 所 示 ， 网 页 显示 了 3 个 按钮 ， 每 个 按钮 
执行 不 同 的 定位 操作 。 网 页 下 方 显示 了 3 个 层 ， 其 中 d2 层 包含 d3 层 。 当 单 击 第 二 个 按钮 


时 ， 


系统 将 重新 动态 定位 d3 的 坐标 位 置 ， 其 显示 效果 如 图 15-6 所 示 。 其 他 按钮 的 显示 部 
感 兴趣 的 读者 可 以 自己 测试 。 


图 15-5 动态 定位 前 图 15-6 动态 定位 后 


15.2.4 ”案例 一 一 显示 与 隐藏 


在 有 的 网 站 ， 有 时 为 了 节省 显示 空间 会 自动 或 通过 人 工 手 动 隐藏 一 些 层 。 实 现 层 的 隐藏 


或 展开 ， 需 要 将 CSS 代码 和 JavaScript 代码 结合 使 用 。 


【 例 15.4】 (实例 文件 ，ch15\15.4.htmD) 显 示 与 隐藏 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<tit1le> 隐 藏 和 显示 </title> 
<script language="JavaScript" type="text/Javascript"> 
A ae 
function toggle (targetid) { 
if (document .getElementById){ 
target=document .getElementById (targetid); 
if (target.style.display=="block"){ 
target.style.display="none"; 
} else { 
target.style.display="block"; 
} 


= 

</script> 

<style type="text/css"> 

-div{ border:lpx #06F solid;height:50px;width:150px;display:none;} 
a {width:100px; display:block} 

</style> 

</head> 


<body> 
<a href="#" onclick="toggle('div1')"> 显 示 / 隐 藏 </a> 
<div id="divlw class="div"> 


用 证 
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<img src=11.jpg> 

<p> 市 场 价 : 390 元 </p> 

<p> 购 买 价 : 190 元 </p> 

</div> 

</body> 

</html> 

在 上 述 代码 中 ,创建 了 一 个 超级 链接 和 一 个 DIV 层 div1。DIV 层 中 包含 了 图 片 和 段落 信 
。 在 类 选择 器 div 中 ， 定 义 了 边框 样式 、 高 度 和 宽带 ， 并 使 用 display 属性 设 定 3 层 的 不 显 
KR 。 JavaScript 代码 首先 根据 ID 名 称 targetid， 判 断 display 的 当前 属性 值 。 如 果 其 值 为 
block， 则 设置 为 none; 如 果 其 值 为 none， 则 设置 为 block。 

上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 15-7 所 示 。 当 单 击 【 显 示 / 隐 藏 】 超 级 链接 

时 ， 会 显示 如 图 15-8 所 示 的 效果 。 此 时 显示 的 是 一 个 DIV 层 ， 层 里 面包 含 了 图 片 和 段落 
信息 。 
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图 15-7 动态 显示 前 图 15-8 动态 显示 后 


15.3 ”实战 演练 一 一 控制 表单 背景 色 和 文字 提示 


在 CSS 样式 规则 中 ， 可 以 使 用 鼠标 悬浮 特效 定义 超级 链接 的 显示 样式 。 同 样 ， 利 用 该 特 
效 可 以 定义 表单 的 显示 样式 ， 即 当 鼠 标 放 在 表单 元 素 的 上 面 时 ， 会 显示 表单 背景 色 和 文字 提 
示 。 但 是 这 里 不 是 使 用 鼠标 悬浮 特效 完成 的 ， 而 是 使 用 JavaScript 事件 完成 的 ， 即 鼠标 
onmouseover 事件 ， 当 触发 了 这 个 事件 后 ， 就 可 以 定义 指定 元 素 的 显示 样式 。 

具体 实现 步骤 如 下 。 

EEC 创建 HIML， 实 现 基本 表单 。 

<!DOCTYPE html> 

<html> 


<head> 


<title> 鼠 标 移 上 背景 变色 和 文字 提示 


</title> 

</head> 

<body> 

<hl align=center> 密 码 修 改 页 面 </h1> 

<ol id="need"> 

<li><label class="old password"> 原 始 密码 : </label> <input name="'" 
type='password' id='' /></1i> 

<li><label class="new password"> 新 的 密码 : </label> <input name="" 
type='password' id='' /><dfn> (密码 长 度 为 6~20 字 节 。 不 想 修改 请 留 空 ) </dfn></1i> 
<li><label class="rePassword"> 重 复 密码 : </label> <input name="'' 
type='password' id='!' /></1i> 

<li><label class="email"> 邮 箱 设置 </label> <input name='' type='text' id="'" 
/><dfn> (承诺 绝 不 会 给 您 发 送 任何 垃圾 邮件 。) 

</dfn></1i> 

</ol> 

</body> 

</html> 


上 述 代 码 创 建 了 一 个 无 序列 表 。 该 列表 中 包含 有 一 个 表单 ， 该 表单 中 包含 有 多 个 表单 
元 素 。 

上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 15-9 所 示 。 从 中 可 以 看 到 页 面 显示 了 4 个 文 
本 框 ， 每 个 文本 框 前 面 都 带 有 序号 ， 其 中 第 二 个 和 第 四 个 文本 框 带 有 注解 。 

EEC 添加 CSS 代码 ， 完 成 各 种 样式 设置 。 


<style> 

#need {margin: 20px auto 0;width: 6l0px;} 

#need 1i {height: 26px;width: 600px;font: 12px/26px Arial, Helvetica, sans- 
serif;background: #FFD;border-bottom: lpx dashed #E0E0E0;display: 
block;cursor: text;padding: 7px Opx 7px 1l0px!important;padding: 5px Opx 5PX 
10px;} 

#need li:hover,#need li.hover {background: #FFE8E8;} 

#need input {line-height: 14px;background: #FFF;height: 14px;width: 
200px;border: lpx solid #E0E0E0;vertical-align: middle;padding: 6px;} 

#need label {padding-left: 30px;} 

#need label.old password {background-position: 0 -277px;} 

#need label.new password {background-position: 0 -1576px;} 

#need label.rePassword {background-position: 0 -1638px;} 

#need label.email {background-position: 0 -429px;} 

#need dfn {display: none;} 

#need li:hover dfn, #need li.hover dfn {display:inline;margin-left: 
Tpx;color: #676767;} 

</style> 


上 述 CSS 代码 定义 了 表单 元 素 的 显示 样式 ， 例 如 表单 基本 样式 、 有 序列 表 中 列表 项 、 鼠 
标 悬 浮 时 、 表 单元 素 等 。 

上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 15-10 所 示 。 从 中 可 以 看 到 页 面 表单 元 素 带 
有 背景 色 ， 并 且 有 序列 表 的 前 面 的 序号 和 表单 元 素 后 面 的 注解 被 CSS 代码 去 掉 了 。 
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15-9 ”表单 元 素 显示 效果 15-10 ”CSS 样式 定义 表单 效果 
添加 JavaScript 代码 ， 控 制 页 面 背景 色 。 


<script type="text/javascript"> 
function suckerfish(type, tag, parentId) { 
if (window.attachEvent) { 
window.attachEvent ("onload", function() { 
var sfEls = 
(parentId==null) ?document .getElementsByTagName (tag) :document .getElementById 
(ParentId) .getElementsByTagName (tag); 
type (sfEls); 
Re 3 
AN 
hover = function(sfEls) { 
for (var i=0; i<sfEls.length; i++) { 
sfEls[i] .onmouseover=function() { 
this.className+=" hover"; 
3 
sfEls[i] .onmouseout=function() { 
this.className=this.className.replace (new RegExp(" hover\\b"), ""); 
3 
suckerfish(hover, "1i"); 
</script> 


上 述 JavaScript 代码 ， 定 义 了 鼠标 放 在 表单 上 时 表单 背景 色 和 提示 信息 发 生 的 变化 。 这 些 
变化 都 是 使 用 JavaScript 事件 完成 的 ， 此 处 调用 了 onload 事件 、onmouseover 事件 等 。 

上 述 代 码 在 了 9.0 浏览 器 中 的 显示 效果 如 图 15-11 所 示 。 从 中 可 以 看 到 当 鼠 标 放 到 第 二 
个 文本 框 上 时 ， 其 背景 色 变 为 了 红色 ， 并 且 在 文本 框 后 出 现 了 注解 。 


图 15-11 JavaScript 实现 表单 特效 


15.4” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: 网 页 动态 内 容 效 果 。 
练习 2: 网 页 动态 样式 效果 。 
练习 3: 网 页 动态 定位 效果 。 
练习 4: 网 页 显示 与 隐藏 效果 。 


15.5 高 手 甜 点 


甜点 1: 在 JavaScript 中 innerHTML 与 innerText 的 用 法 与 区 别 是 什么 ? 
假设 现在 有 一 个 DIV 层 ， 代 码 如 下 : 


<div id="test"> 
<span style="color:red">testl</span> test2 
</div> 


innerText 属性 表示 从 起 始 位 置 到 终止 位 置 的 内 容 , 但 它 去 掉 了 HTML 标签 。 例 如 上 述 示 
例 代 码 中 的 innerText 的 值 是 test1、test2， 其 中 span 标签 被 去 除了 。 

innerHTML 属性 除了 全 部 内 容 外 ， 还 包含 对 象 标签 本 身 。 例 如 上 述 示例 代码 中 的 
text.outerHTML 的 值 是 <div id="test"><span style="colorred">testl</span> test2</div>。 


甜点 2: JavaScript 是 如 何 控制 换行 的 ? 
无 论 使 用 哪 种 引号 创建 字符 串 ， 字 符 串 中 间 不 能 包含 强制 换行 符 。 


Var temp='<h2 class="a">A list</h2> 
<ol> 
</ol>'; 


这 样 是 错误 的 。 
正确 的 写法 是 使 用 反 斜 杠 转 义 换行 符 。 


Var temp='<h2 class="a">A list</h2>\ 
<ol>\ 
</ol>' 
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JavaScript 的 安全 性 
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ipt 的 形式 源 于 当初 不 同 的 发 


在 对 页 面 进行 设计 时 ， 为 了 方便 用 户 以 更 加 美观 、 合 理 的 规格 打印 页 面 内 容 ， 


JavaScript 提供 了 设置 页 面 打 印 的 功能 。 现 在 ，JavaScr 
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16.1 案例 一 一 使 用 WebBrowser 


组 件 的 execWB() 方 法 打印 


WebBrowser 组 件 是 正 浏览 器 内 置 的 控件 ， 用 户 无 需 下 载 ， 就 可 以 使 用 。 该 组 件 最 大 的 
优点 是 客户 端 能 独立 完成 打印 目标 文档 ， 从 而 减轻 了 服务 器 的 负担 。 

在 使 用 WebBrowser 组 件 时 ， 首 先 要 在 <body> 标 记 的 下 面 用 “<object>...</object>” 标 记 
声明 WebBrowser 组 件 ， 具 体 代码 如 下 : 

<object id="WebBrowser" width=0 height=0 classid="CLSID:8856F961-340R-11D0- 

A96B-00C04FD705A2"></object> 


对 页 面 的 打印 操作 ， 主 要 利用 WebBrowser 组 件 的 ExecWB() 方 法 实现 ， 有 具体 语法 格式 


G3 


如 下 : 


WebBrowser.ExecWB (nCmdID, nCmdExecOpt, [pvaIn], [pvaOut]) 


参数 说 明 如 下 。 


@ WebBrowser: 为 必 选 项 ， 是 空间 名 称 。 
@ nCmdID 参数 : 为 必 选 项 ， 用 于 执行 操作 功能 的 命令 。 其 参数 的 常用 取 值 如 表 16-1 
所 示 。 
表 16-1 nCmdID 参数 的 常用 取 值 
参 数 说 明 


OLECMDID_OPEN 打开 窗 体 
OLECMDID NEW 关闭 现 有 所 有 的 IE 窗口 ， 并 打开 一 个 新 窗口 
OLECMDID SAVE 保存 网 页 
OLECMDID SAVEAS 保存 所 有 网 页 
OLECMDID SAVECOPYAS 保存 并 复制 网 页 
OLECMDID PRINT 打印 
OLECMDID PRINTPREVIEW 打印 预览 
OLECMDID PAGESETUP 页 面 设置 
OLECMDID PROPERTIES 当前 页 面 属性 
OLECMDID CUT 前 切 
OLECMDID COPY 复制 
OLECMDID PASTE 粘贴 
OLECMDID PASTESPECIAL 选择 性 粘贴 
OLECMDID UNDO 撤销 
OLECMDID REDO 重 做 
OLECMDID selectALL 全 选 


四 


第 
续 表 人 
参 数 说 明 | 
OLECMDID CLEARselectION 取消 全 选 加 
OLECMDID ZOOM 获取 焦点 训 
OLECMDID GETZOOMRANGE 获得 焦点 范围 和 
OLECMDID updateCOMMANDS 下 载 更 新 测 
OLECMDID REFRESH 刷新 导 
OLECMDID STOP 停止 测 
OLECMDID HIDETOOLBARS 隐藏 工具 栏 
OLECMDID SETTITLE 设置 标题 
OLECMDID SETDOWNLOADSTATE 设置 下 载 状 态 
OLECMDID STOPDOWNLOAD 停止 下 载 


ee 表 16-1 中 的 关键 词 都 可 以 在 浏览 器 的 菜单 里 面 找到 对 应 的 选项 。 


GG 


e@ nCmdExecOpt 参数 : 为 必 选 项 ， 用 于 执行 相关 的 选项 ， 通 常情 况 下 该 值 为 1。 其 参 
数 的 常用 取 值 如 表 16-2 所 示 。 


表 16-2 nCmdExecOpt 参数 的 常用 取 值 


参 数 
OLECMDEXECOPT DODEFAULT 
OLECMDEXECOPT PROMPTUSER 
LECMDEXECOPT DONTPROMPTUSER 
OLECMDEXECOPT SHOWHELP 


| 
外 对 于 ncmdExecopt 参数 来 说 , 一 般 选 1 就 可 以 了 。 


WebBrower 组 件 中 的 execWB() 方 法 的 常用 功能 如 表 16-3 所 示 。 
表 16-3 ”execWB() 方 法 的 常用 取 值 说 明 


execWB() 方 法 的 常用 取 值 说 明 
WebBrowser.ExecWB(1.1) 打开 正 窗口 
WebBrowser.ExecWB(2.1 关闭 现在 所 有 的 正 窗口 ， 并 打开 一 个 新 窗口 
WebBrowser.ExecWB(4.1) 保存 网 页 
WebBrowser.ExecWB(6.1) 打印 
WebBrowser. ExecWB(7.1) 打印 预览 

WebBrowser.ExecWB(8.1 打印 页 面 设置 
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续 表 


execWB() 方 法 的 常用 取 值 
WebBrowser.ExecWB(10.1) 查看 页 面 属 性 
撤销 
全 选 
刷新 
关闭 窗 体 无 提示 


下 面 给 出 一 个 实例 ， 该 实例 的 页 面 中 设置 了 3 个 超级 链接 ， 分 别 是 打印 预览 、 打 印 和 直 
接 打印 ， 可 使 用 户 快速 实现 页 面 的 打印 功能 。 

【 例 16.1】 (实例 文件 : chl16\ 打 印 \index.htmD) 设 置 页 面 打印 功能 。 代 码 如 下 : 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 


<title> 利 用 WebBrowser 打印 </title> 
<link href="CSS/style.css" rel="stylesheet"/> 


WebBrowser.ExecWB(15,1) 


WebBrowser.ExecWB(17.1 


WebBrowser.ExecWB(22.1) 
WebBrowser.ExecWB(45.1 


</head> 
<body> 
<object id="WebBrowser" classi ClSID:8856F961-340A-11D0-A96B- 
00C04Fd705A2" width="0" height a 
</object> 
<table width="650" height="34" border="0" align="center" cellpadding="0" 
cellspacing eb 
< 


<td align="center"><img src="images/bg.jpg" width="650" 
height="46"></td> 
</tr> 
</table> 
<table width="650" border="1"” align="center" cellspacing: 
bordercolorlight="#FE7529" bordercolordark="#FFFFFF"> 
<tr align: enter" bgcolor="#FE7529"> 
<td width="155"” height="30"> 客 户 名 称 </td> 
<td width="59" > 联系 人 </td> 
<td width="84"> 联 系 人 电话 </td> 
<td width="175">E-mail</td> 
<td width="64"> 所 在 地 区 </td> 
</tr> 
</thead> 
< 
<td height="30" bgcolor="#FFFFFF"> 大 众 汽车 有 限 公司 </td> 
<td align="center" bgcolor="#FFFFFF"> 刘 经 理 </td> 
<td bgcolor="#FFFFFF">13012346578</td> 
<td bgcolor="#FFFFFF">dazhong@163.com</td> 
<tqd bgcolor="#FFFFFF"> 上 海 市 </td> 
</tr> 
A 
<td height="30" bgcolor="#FFFFFF"> 斯 柯达 汽车 有 限 公司 </td> 
<td align="center" bgcolor="#FFFFFF"> 陈 经 理 </td> 
<td bgcolor="#FFFFFF">13112346578</td> 
<td bgcolor="#FFFFFF">skd@qq.com</td> 


i 


<td bgcolor="#FFFFFF"> 长 春 市 </td> 
< 
EE 
<td height="30" bgcolor="#FFFFFF™" style="page-break-after:always"> 起 亚 汽 
车 有 限 公 司 </td> 
<td align="center" bgcolor="#FFFFFF"> 张 经 理 </td> 
<td bgcolor="#FFFFFF">13712345678</td> 


夫妇 当 司 吕 才 9 吕 有 鲁 


<td bgcolor="#FFFFFF">qiya@163.com</td> 浏 
<td bgcolor="#FFFFFF"> 南 京 市 </td> 器 
/EE> 检 
<tr> 测 


<td height="30" bgcolor="#FFFFFF"> 惠 民 通 讯 有 限 公司 </td> 
<td align="center" bgcolor="#FFFFFF"> 李 经 理 </td> 
<td bgcolor="#FFFFFF">13925678945</td> 
<td bgcolor="#FFFFFF">huimin@sina.com</td> 
<td bgcolor="#FFFFFF"> 北 京 市 </td> 
</tr> 
<tr> 
<td height="30" bgcolor="#FFFFFF"> 引 航 科 技 有 限 公司 </td> 
<td align="center" bgcolor="#FFFFFF"> 刘 经 理 </td> 
<td bgcolor="#FFFFFF">13045678542</td> 
<td bgcolor="#FFFFFF">yinhang@sina.com</td> 
<td bgcolor="#FFFFFF"> 武 汉 市 </td> 
</tr> 
</table> 
<table widt. 647" align="center"> 
<tr align="center" bgcolor="#FFFFFF"> 
<td height="27" colspan="3" align="right"><a href="#" 
onClick="webprint (0) "> 打印 预览 </a> <a href="#" onClick="webprint (1)"> 打 印 </a> 
<a href="#" onClick="webprint (2) "> 直接 打印 </a> </td> 
A 
</table> 
<script language="javascript"> 
过 二 二 一 
function webprint (n) 


{ 


GG 


Switch (n) 

{ 
case 0:document.all .WebBrowser.Execwb (7,1);break; 
case l:document .all .WebBrowser.Execwb (6,1) ;break; 
case 2:document .all .WebBrowser .Execwb (6,6);break; 


} 

WE 
</script> 
</body> 
</html> 


运行 上 述 代 码 ， 预 览 效 果 如 图 16-1 所 示 。 从 中 可 以 看 出 在 页 面 的 右 下 角 有 3 个 打印 超 
链接 。 
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16-1 网 页 预览 效果 
16.2 ”案例 一 一 打印 指定 框架 中 的 内 容 


在 打印 页 面 时 ， 有 时 只 需要 打印 页 面 中 的 部 分 内 容 ， 实 现 该 功能 的 步骤 是 ， 先 将 要 打印 
的 内 容 放 置 到 网 页 框架 之 中 ， 然 后 利用 Window 对 象 的 print0 方 法 打印 指定 框架 中 的 内 容 。 

实现 打印 指定 框架 中 的 内 容 的 具体 方法 是 ， 使 用 内 置 变量 Parent 为 要 打印 的 框架 获得 焦 
点 。 内 置 变量 parent 指 的 是 包含 当前 分 割 窗口 的 父 窗口 ， 也 就 是 在 一 窗口 内 如 果 有 分 割 窗 
口 ， 而 在 其 中 一 个 分 割 窗 口中 又 包含 分 割 窗 口 ， 则 第 二 层 的 分 割 窗 口 可 以 用 Parent 变量 引用 
包含 它 的 父 分 割 窗 口 oparent 的 语法 格式 如 下 : 


Parent .mainErame .fcous () 


其 中 参数 mainFrame 为 框架 的 名 称 。 
【 例 16.2】 (实例 文件 ，ch16\ 打 印 指定 内 容 \index.htm 有 ) 利 用 parent 对 象 的 print() 方 法 打 
印 指定 框架 中 的 内 容 。 代 码 如 下 : 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 打 印 指定 框架 中 的 内 容 </title> 
<link href="style.css" rel="stylesheet"> 
</head> 
<body> 
<table width="700" height="34" border="0" align="center" cellpadding="0" 
cellspacing="0" class="noprint"> 
<tr> 
<td align="center"><img src="bg.jpg" width="650" height="46"></td> 
EE 
</table> 
< 
<td width="32" height="189">gnbsp;</td> 
<td colspan="2">gnbsp;</td> 
<td width="24">gnbsp;</td> 
和 
局 
<td height="264" rowspan="2">&gnbsp;</td> 


令 352 


mn 

第 

<td width="666" height="25" class="word orange"> 当 前 位 置 : 系统 查询 &gt; 借 避 

阅 信 息 打印 &gt; ggt; ggt; </td> 章 
<td width="58" align="center" class="word Green"><a href="#" 

onClick="parent .contentFrame.focus () ;window.print ();"> 打 印 </a></td> 页 

<td rowspan="2">gnbsp;</td> 面 

</tr> 志 

<tr> 和 

<td height="240" colspan="2" align="center" valign="top" 浏 

bgcolor="#FFFFFF"><iframe name="contentFrame" src="content.html" 览 

frameborder="0" width="100%" height="100%"></iframe></td> 总 

</tE> 测 

<tr> 


<td>gnbsp;</td> 
<td colspan="2">gnbsp;</td> 
<td>gnbsp;</td> 
</tr> 
</table> 
</body> 
</html> 


运行 上 述 代 码 ， 预 览 效 果 如 图 16-2 所 示 。 从 中 可 以 看 到 打印 超 链接 ， 单 击 该 超 链接 ， 即 
可 将 页 面 中 的 表格 打印 出 来 。 


pS 


0 Owenapeomo ame Bo-cx 
EE 中 


图 16-2 ”网 页 预览 效果 


16.3 ”案例 一 一 分 页 打印 


网 页 中 的 分 页 打印 功能 是 利用 CSS 样式 中 的 page-break-before( 在 对 象 前 分 页 ) 或 page- 
break-after( 在 对 象 后 分 页 ) 属 性 来 实现 的 ， 此 外 还 会 用 到 在 打印 的 每 页 面 显 示 表 头 和 表 尾 的 
<thead> 和 <tfoot> 标 记 。 

具体 参数 的 含义 如 下 。 

e@ ”<thead> 标 记 : 用 于 设置 表格 的 表 头 。 

e@ ”<tfoot> 标 记 : 用 于 设置 表格 的 表 尾 。 

@ ”page-break-after 属性 : 该 属性 在 打印 文档 时 发 生 作 用 ， 用 于 进行 分 页 打印 。 

page-break-after 属性 的 语法 格式 如 下 : 


Page Break After: autolalwayslavoidl1left1Fight 


:53@ 
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page-break-after 属性 中 各 参数 的 说 明 如 表 16-4 所 示 。 
表 16-4 page-break-after 属性 的 参数 说 明 


值 描 述 


i | 默认 。 如 果 必 要 则 在 元 素 后 插入 分 页 符 

always | 在 元 素 后 插入 分 页 符 

i | 避免 在 元 素 后 插入 分 页 符 

Ieft | 在 元 素 之 后 足够 的 分 页 符 ， 一 直到 一 张 空白 的 左 页 为 上 
rit 在 元 素 之 后 足够 的 分 页 符 ， 一 直到 一 张 空白 的 右 页 为 上 


下 面 的 实例 ， 利 用 CSS 样式 中 的 page-break-after 属性 在 指定 位 置 的 对 象 前 进行 分 页 ， 并 
使 分 页 打印 的 每 一 页 前 面 都 有 表 头 信息 。 
【 例 16.3】 (实例 文件 :chl16\ 分 页 打印 \index.html) 分 页 打印 。 代 码 如 下 ; 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 分 页 打印 </title> 

<link href="CSS/style.css" rel="stylesheet"/> 

<style> 


@media print{ 
.noprint{display:none} 
3 

</style> 


</head> 
<body> 


<object id="WebBrowser" classid="ClSID:8856F961-340A-11D0-A96B- 
00C04Fd705A2" width="0" height="0"> 


</object> 
<table width="700" height="34" border="0" align="center" cellpadding="0" 
cellspacing="0" class="noprint"> 

<tr> 


<td align="center"><img src="images/bg.jpg" width="650" 
height="46"></td> 


REE 
</table> 
<table width="700"” border="1"” cellpadding="0" align="center" 
cellspacing=" bgcolor="#FE7529" id="pay" bordercolor="#FE7529" 


bordercolordark="#FE7529" bordercolorlight="#FFFFFF" style="border-bottom- 
style:none;"> 
<thead style="display:table-header-group;font-weight:bold"> 
<tr align="center" bgcolor="#FE7529"> 
<td width="155"” height="30"> 客 户 名 称 </td> 
<td width="59"” > 联系 人 </td> 
<td width="84"> 联 系 人 电话 </td> 
<td width="175">E-mail</td> 
<td width="64"> 所 在 地 区 </td> 
E> 


柄 | 


</thead> 
<tr> 
<td height="30" bgcolor="#FFFFFF"> 大 众 汽车 有 限 公司 </td> 
<td align="center" bgcolor="#FFFFFF"> 刘 经 理 </td> 
<td bgcolor="#FFFFFF">13012346578</td> 
<td bgcolor="#FFFFFF">dazhong@163.com</td> 
<td bgcolor="#FFFFFF"> 上 海 市 </td> 


过 吕 当 辐 昼 “机 91 中 便 


EE 浏 
<tr> 览 
<td height="30" bgcolor="#FFFFFF"> 斯 柯达 汽车 有 限 公 司 </td> 器 
<td align="center" bgcolor="#FFFFFF"> 陈 经 理 </td> 区 


<td bgcolor="#FFFFFF">13112346578</td> 
<td bgcolor="#FFFFFF">skd@qq.com</td> 
<td bgcolor="#FFFFFF"> 长 春 市 </ta> 
</tr> 
<tr> 
<td height="30" bgcolor="#FFFFFF" style: "page-break-after:always"> 起 亚 汽 
车 有 限 公司 </td> 
<td align="center" bgcolor="#FFFFFF"> 张 经 理 </td> 
<td bgcolor="#FFFFFF">13712345678</td> 
<td bgcolor="#FFFFFF">qiya@163.com</td> 
<td bgcolor="#FFFFFF"> 南 京 市 </td> 
</tr> 
<tr> 
<td height="30" bgcolor="#FFFFFF"> 惠 民 通 讯 有 限 公 司 </td> 
<td align="center" bgcolor="#FFFFFF"> 李 经 理 </td> 
<td bgcolor="#FFFFFF">13925678945</td> 
<td bgcolor="#FFFFFF">huimin@sina.com</td> 
<td bgcolor="#FFFFFF"> 北 京 市 </td> 
</tr> 
<tr> 
<td height="30" bgcolor="#FFFFFF"> 引 航 科 技 有 限 公司 </td> 
<td align="center" bgcolor="#FFFFFF"> 刘 经 理 </td> 
<td bgcolor="#FFFFFF">13045678542</td> 
<td bgcolor="#FFFFFF">yinhang@sina.com</td> 
<td bgcolor="#FFFFFF"> 武 汉 市 </td> 
</tr> 
<tfoot style="display:table-footer-group; 
border:none;"><tr><td></td></tr></tfoot> 


GG 


</table> 
<table widt. 700" align="center" class="noprint"> 
<tr align="center" bgcolor="#FFFFFF"> 


<td height="27" colspan="3" align="right"> 
<a href="#" onClick="document.all.WebBrowser.Execwb(7,1)"> 打 印 预 览 </a> 
<a href="#" onClick="document.all.WebBrowser.Execwb (6,1)"> 打 印 </a> 
<a href="#" onClick="document.all.WebBrowser.Execwb (8,1)"> 页 面 设置 </a> 
</td> 
</tr> 
</table> 
</body> 
</html> 


运行 上 述 代 码 ， 预 览 效 果 如 图 16-3 所 示 ， 在 页 面 的 右 下 角 可 以 看 到 3 个 有 关 打 印 的 超级 
链接 。 


D4 
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图 16-3 ”网 页 预览 效果 
单 击 【 打 印 预览 】 超 级 链接 ， 打 开 【 打 印 预览 】 窗 口 ， 窗 口中 显示 的 是 需要 打印 的 第 一 


页 的 内 容 ， 如 图 16-4 所 示 。 


在 【打印 预览 】 窗 口中 单 击 页 面 下 方 的 【下 一 页 】 按 钮 ， 窗 口中 显示 的 是 需要 打印 的 下 


一 页 的 内 容 ， 如 图 16-5 所 示 。 


图 16-4 打印 预览 效果 图 16-5 打印 预览 效果 


16.4 ”案例 一 一 设置 页 眉 / 页 脚 


WshShell 对 象 提供 了 对 本 地 Windows 外 过 程序 的 访问 ， 通 过 WshShell 对 象 模拟 键盘 ， 


可 向 激活 窗口 发 送 键 值 实现 选择 、 弹 出 定时 提示 框 、 注 册 表 的 读 写 、 程 序 的 启动 、 系 统 等 
待 、 添 加 Event Log、 创 建 快捷 方式 等 功能 。 


设置 页 眉 /页 脚 主要 应 用 了 WshShell 对 象 的 RegWrite0 方 法 。 该 方法 用 于 在 注册 表 中 设置 


指定 的 键 值 。 其 语法 格式 如 下 : 


WshShell .RegWrite(strName, anyValue[,strType]) 


其 中 ， 各 参数 的 含义 如 下 。 

e@ ”strName: 表示 要 创建 、 添 加 或 更 改 的 项 名 、 值 名 或 值 的 字符 串 值 。 

@ ”anyValue: 要 创建 的 新 项 名 称 、 要 添加 到 现 有 项 中 的 值 名 或 要 指派 给 现 有 值 名 的 
新 值 。 

e@ strType: 可 选 。 表 示 值 的 数据 类 型 的 字符 串 值 。 

下 面 通过 实例 ， 利 用 WshShell 对 象 的 Reg Write 方法 介绍 打印 时 页 眉 与 页 脚 的 设置 。 


i 加 


【 例 16.4】 (实例 文件 ，ch16\ 页 眉 页 脚 \index.htmD) 设 置 打印 时 的 页 眉 与 页 脚 。 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 设 置 页 眉 页 脚 </title> 

<link href="CSS/style.css" rel="stylesheet"/> 


过 如 当 梧 吕 机 91 名 鲁 


<script language="Javascript"> 浏 
A 览 
Var HKEY RootPath="HKEY CURRENT USER\\Software\\Microsoft\\Internet 器 
Explorer\\PageSetup\\"; 村 


function PageSetup del(){ 

try{ 
Var WSc=new ActiveXObject ("WScript.Shell"); 
HKEY Key="header"; 
WSc.RegWrite (HKEY RootPath+HKEY Key, ""); 
HKEY Key="footer"; 
WSc.RegWrite (HKEY RootPath+HKEY Key, ""); 

}catch(e){} 


} 
function PageSetup set(){ 
try{ 
Var WSc=new ActiveXObject ("WScript.Shell"); 
HKEY Key="header"; 
WSc.RegWrite (HKEY RootPath+HKEY Key, "&w&b 页 码 , gp/&P"); 
HKEY Key="footer"; 
WSc.RegWrite (HKEY RootPath+HKEY Key,"&ug&b&d"); 
}catch(e){} 
了 
/Vs 
</script> 
</head> 
<body> 
<object id="WebBrowser" classid="ClSID:8856F961-340A-11D0-A96B- 
00C04Fd705A2" width="0" height="0"> 
</object> 
<table width="700" height="34" border="0" align="center" cellpadding="0" 
cellspacing="0" class="noprint"> 
<tr> 
<td align="center"><img src="images/bg.jpg" width="650" 
height="46"></td> 
</tr> 
</table> 
<table width="700" border="1" cellpadding="0" align="center" 
cellspacing="0" bgcolor="#FE7529" id="pay" bordercolor="#FE7529" 
bordercolordark="#FE7529" bordercolorlight="#FFFFFF" style="border-bottom- 
style:none;"> 
<thead style="display:table-header-group;font-weight:bold"> 
<tr align="center" bgcolor="#FE7529"> 
<td width="155" height="30"> 客 户 名 称 </td> 
<tq wiqth="59"” > 联系 人 </td> 
<td width="84"> 联 系 人 电话 </td> 
<td width="175">E-mail</td> 
<tqd width="64"> 所 在 地 区 </td> 
</tr> 
</thead> 
<tr> 


GG 
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<td height="30" bgcolor="#FFFFFEF"> 大 众 汽车 有 限 公 司 </td> 
<td align="center" bgcolor="#FFFFFF"> 刘 经 理 </td> 
<td bgcolor="#FFFFFF">13012346578</td> 
<td bgcolor="#FFFFFF">dazhong@163.com</td> 
<td bgcolor="#FFFFFF"> 上 海 市 </td> 
</tr> 
<tr> 
<td height="30"” bgcolor="#FFFFFF"> 斯 柯达 汽车 有 限 公司 </td> 
<td align="center"” bgcolor="#FFFFFF"> 陈 经 理 </td> 
<td bgcolor="#FFFFFF">13112346578</td> 
<td bgcolor="#FFFFFF">skd@qq.com</td> 
<td bgcolor="#FFFFFF"> 长 春 市 </td> 
</tr> 
<tr> 
<td height="30" bgcolor="#FFFFFF" style: "page-break-after:always"> 起 亚 汽 
车 有 限 公司 </td> 
<td align="center" bgcolor="#FFFFFF"> 张 经 理 </td> 
<td bgcolor="#FFFFFF">13712345678</td> 
<td bgcolor="#FFFFFF">qiya@163.com</td> 
<td bgcolor="#FFFFFF"> 南 京 市 </td> 
</tr> 
<tr> 
<td height="30" bgcolor="#FFFFFF"> 惠 民 通 讯 有 限 公司 </td> 
<td align="center" bgcolor="#FFFFFF"> 李 经 理 </td> 
<td bgcolor="#FFFFFF">13925678945</td> 
<td bgcolor="#FFFFFF">huimin@sina.com</td> 
<td bgcolor="#FFFFFF"> 北 京 市 </td> 
eHEr> 
< 
<td height="30" bgcolor="#FFFFFF"> 引 航 科技 有 限 公司 </td> 
<td align="center" bgcolor="#FFFFFF"> 刘 经 理 </td> 
<td bgcolor="#FFFFFF">13045678542</td> 
<td bgcolor="#FFFFFF">yinhang@sina.com</td> 
<td bgcolor="#FFFFFF"> 武 汉 市 </td> 
</tr> 
<tfoot style="display:table-footer-group; 
border:none;"><tr><td></td></tr></tfoot> 
</table> 
<table width="700" align="center" class="noprint"> 
<tr align="center" bgcolor="#FFFFFF"> 
<td height="27" colspan="3" align="right"> 
<a href="#" onClick="PageSetup del() "> 清空 页 眉 页 脚 </a> 
onClick="PageSetup set () "> 恢复 页 眉 页 脚 </a> 
onClick="document .al1l.WebBrowser.Execwb (7,1) "> 打印 预览 </a> 
<a href="#" onClick="document.all.WebBrowser.Execwb (6,1) "> 打印 </a> 
<a href="#" onClick="document .all.WebBrowser.Execwb (8,1) "> 页 面 设置 </a> 
</td> 
</tr> 
</table> 
</body> 
</html> 


运行 上 述 代 码 ， 预 览 效果 如 图 16-6 所 示 。 从 中 可 以 看 到 在 页 面 的 右 下 角 有 页 眉 与 页 脚 的 
超级 链接 。 

单 击 【 打 印 预览 】 按 钮 ， 在 打开 的 【打印 预览 】 窗 口中 查看 页 眉 页 脚 的 内 容 ， 如 图 16-7 
所 示 。 
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16-6 ”预览 效果 


16.5 


图 16-7 打印 预览 效果 


浏览 器 检测 对 象 


浏览 器 检测 对 于 编写 适用 于 多 种 浏览 器 的 代码 非常 有 用 。 使 用 Navigator 对 象 可 以 检测 浏 
览 器 ， 该 对 象 包含 了 浏览 器 的 整体 信息 ， 例 如 浏览 器 的 名 称 、 版 本 号 码 等 。 


16.5.1 


浏览 器 对 象 的 属性 


目前 ， 由 于 浏览 器 的 市 场 竞 争 激烈 ，Navigator 对 象 的 一 些 属性 还 不 能 完全 被 所 有 的 浏览 
器 支持 。Navigator 对 象 的 属性 ， 如 表 16-5 所 示 。 


表 16-5 Navigator 对 象 的 属性 


属 性 描 述 
appCodeName 返回 浏览 器 的 代码 名 
appMinorVersion 返回 浏览 器 的 次 级 版 本 
appName 返回 浏览 器 的 名 称 
appVersion 返回 浏览 器 的 平台 和 版 本 信息 
browserLanguage 返回 当前 浏览 器 的 语言 
cookieEnabled 返回 指明 浏览 器 中 是 否 启用 cookie 的 布尔 值 
cpuClass 返回 浏览 器 系统 的 CPU 等 级 
online 返回 指明 系统 是 否 处 于 脱 机 模式 的 布尔 值 
Platform 返回 运行 浏览 器 的 操作 系统 平台 
systemLanguage 返回 OS 使 用 的 默认 语言 
userAgent 返回 由 客户 机 发 送 服务 器 的 user-agent 头 部 的 值 
USeILanguage 返回 OS 的 自然 语言 设置 


16.5.2 ”案例 一 一 检测 浏览 器 的 名 称 与 版 本 
使 用 Navigator 对 象 的 属性 可 


[以 检测 浏览 器 的 名 称 、 版 本 号 、 使 用 的 语言 等 信息 。 


苦 归 号 中 由 9) 游 王 
二 


路 党 


泻 谨 弗 
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【 例 16.5】 (实例 文件 ，ch16\16.5.html) 检 测 并 显示 浏览 器 的 名 称 与 版 本 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<div id="example"></div> 

<script> 

txt = "<p> 浏 览 器 的 代码 名 : " + navigator.appCodeName + "</p>"; 
txt+= "<p> 浏 览 器 名 称 : " + navigator.appName + "</p>"; 

txt+= "<p> 浏 览 器 的 版 本 信息 : " + navigator.appVersion + "</p>"; 
txt+= "<p> 是 否 支持 Cookie: " + navigator.cookieEnabled + "</p>"; 
txt+= "<p> 运 行 浏览 器 的 操作 系统 : " + navigator.platform + "</p>"; 
document .getElementById ("example") .innerHTML=txt; 

</script> 

</body> 

</html> 


在 正 9.0 浏览 器 中 运行 上 述 代 码 ， 显 示 效果 如 图 16-8 所 示 。 


ee o-oo 
加 


Di 用户 目 水 \Documentsv- * 
文件 虽 ” 篇 况 [E) 前 看 (Vi 收藏 (A) 工具 (站 帮助 (H) 


浏览 器 的 代码 名 : Mozilla 
Be 浏览 器 名 称 : Jlicrosoft Internet Explorer 
\ 浏览 器 的 版 本 信息 : 5. 0 (compatible; MSIE 10.0; Windows NT 6.1; 
Trident/6. 0; SLCC2，.NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 
3.0. 30729; .NET4. 0C; GYX:QUALIFIED) 
是 否 支 持 Cookie: true 


运行 浏览 强 的 操作 系统 : Win32 


图 16-8 检测 效果 


16.6 ” 跟 我 练 练 手 


1. 练习 目标 

能 够 熟练 掌握 本 章 所 讲 内 容 。 

2. 上 机 练习 

练习 1: 使 用 WebBrowser 组 件 的 execWBO 方 法 进行 打印 。 
练习 2: 打印 指定 框架 中 的 内 容 。 

练习 3: 分 页 打印 。 

练习 4: 设置 页 眉 /页 脚 。 

练习 5: 浏览 器 检测 对 象 。 


16.7 高 手 甜 点 


甜点 1: 外 部 脚本 必须 包含 <scrip 亿 标签 吗 ? 

在 外 部 脚本 文件 中 ， 只 能 包含 脚本 语言 代码 ， 不 能 包含 其 他 代码 (例如 HTML 代码 等 )、 
不 能 包含 <scrip 世 标签 。 

甜点 2: 如 何 获得 客户 端 浏 览 器 的 名 称 ? 

使 用 navigator.appName 可 以 获取 客户 端 浏览 器 的 名 称 ， 但 是 该 方法 获取 的 浏览 器 的 名 称 


只 有 两 种 ， 分 别 是 IE 和 Netscap。 如 果 用 户 想 获取 具体 的 浏览 器 的 产品 名 称 ， 例 如 Firefox， 
Chrome 等 ， 只 能 通过 navigator.userAgent 来 获取 。 
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Web 协议 是 无 状态 协议 ， 对 于 事务 
Cookie 将 数据 存储 在 客户 端 ， 并 显示 永久 的 数据 
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如 果 后 续 处 理 需 要 先前 的 信息 ， 则 它 必须 ， 但 可 能 
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17.1 ”Cookie 概述 


1. 什么 是 Cookie 对 象 


Cookie 常用 于 识别 用 户 。Cookie 是 服务 器 留 在 用 户 计算 机 中 的 小 文件 。 每 当 相同 的 计算 
机 通过 浏览 器 请 求 页 面 时 ， 它 会 发 送 Cookie 数据 。 

Cookie 的 工作 原理 是 : 当 一 个 客户 端 浏览 器 连接 到 一 个 URL 上 时 ， 它 会 先 扫描 本 地 储存 
的 cookie， 如 果 发 现 其 中 有 和 此 URL 相关 联 的 cookie， 那 么 它 会 把 它们 返回 给 服务 器 端 。 

Cookie 主要 应 用 于 以 下 几 个 方面 。 

(1) 在 页 面 之 间 传 递 变量 。 因 为 浏览 器 不 会 保存 当前 页 面 上 的 任何 变量 信息 ， 如 果 页 面 
被 关闭 ， 则 页 面 上 的 所 有 变量 信息 也 会 消失 。 通 过 Cookie， 可 以 把 变量 值 保存 在 Cookie 中 ， 
然后 另外 的 页 面 可 以 重新 读 取 这 些 值 。 

(2) 记录 访客 的 一 些 信息 。 利 用 Cookie 可 以 保存 客户 曾经 输入 的 信息 、 或 者 记录 访问 网 
页 的 次 数 。 

(3) 通过 把 所 查看 的 页 面 存在 在 Cookie 临时 文件 夹 中 ， 用 以 提高 以 后 的 浏览 速度 。 

用 户 通过 header 可 在 客户 端 生成 Cookie 格式 如 下 : 


Set-cookie:NAME = VALUE; [expires=DATE;] [path=PATH;] [domain=DOMAIN NAME;] [secure] 


NAME 为 cookie 的 名 称 ; VALUE 为 cookie 的 值 ，expires=DATE 为 到 期 日 ，path=PATHL 
domain=DOMAIN NAME: 为 与 某 个 地 址 相对 应 的 路 径 和 域名 ; secure 表示 cookie 不 能 通过 单 
一 的 HTTP 连接 传递 。 


2. Cookie 的 作用 


Cookie 到 底 有 什么 作用 呢 ? 外 自动 识别 注册 的 用 户 ， 例 如 百度 账户 在 登录 一 次 后 ， 下 次 
再 打开 百度 首页 ， 就 会 看 到 该 账户 已 经 登录 了 。@ 网 站 利用 Cookie 跟踪 统计 用 户 访问 该 网 站 
的 习惯 ， 比 如 什么 时 间 访 问 ， 访 问 了 哪些 页 面 ， 在 每 个 网 页 的 停留 时 间 等 。 从 而 为 用 户 提供 
个 性 化 的 服务 。 另 一 方面 ， 这 些 信息 也 可 以 作为 网 站 了 解 用 户 行为 的 工具 ， 对 于 网 站 经 营 策 
略 的 改进 有 一 定 参考 价值 。 例 如 ， 客 户 在 某 家 航空 公司 站 点 查阅 航班 时 刻 表 ， 该 网 站 可 能 就 
创建 了 包含 客户 旅行 计划 的 Cookie， 也 可 能 它 只 记录 了 你 在 该 站 点 上 曾经 访问 过 的 Web 页 ， 
在 客户 下 次 访问 时 ， 网 站 会 根据 客户 的 情况 对 显示 的 内 容 进行 调整 ， 将 客户 所 感 兴趣 的 内 容 
放 在 前 列 。 这 是 高 级 的 Cookie 应 用 。 


17.1.1 设置 Cookie 


目前 Cookie 最 广泛 的 应 用 是 记录 用 户 的 登录 信息 ， 方 便 用 户 在 下 次 访问 该 网 站 时 不 需要 
输入 用 户 名 和 密码 。 当 然 这 种 方便 也 存在 用 户 信息 泄密 的 问题 ， 尤 其 在 多 个 用 户 共用 一 台电 
脑 时 很 容易 发 生 这 样 的 问题 。 

如 果 用 户 不 需要 使 用 Cookie， 可 以 在 浏览 器 中 将 其 删除 或 者 禁止 Cookie 的 作用 ， 具 体操 
作 步 骤 如 下 。 


EC 启动 下 浏览 器 ， 选 择 【工具 】 选 项 ， 在 弹出 的 快捷 菜单 中 选择 【Internet 选 
项 】 命 令 ， 如 图 17-1 所 示 。 

EEIP9 打开 【Intemet 选项 】 对 话 框 ， 在 【常规 】 选 项 卡 的 【浏览 历史 记录 】 选 项 下 单 

击 【删除 】 按 钮 ， 即 可 快速 删除 Cookie 保存 的 信息 ， 如 图 17-2 所 示 。 
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图 17-1 选择 【Internet 选项 】 命 令 图 17-2 【Internet 选项 】 对 话 框 


EEC 选择 【隐私 】 选 项 不， 通过 调整 设置 滑 块 设置 正 浏览 器 对 Cookie 允许 使 用 的 程 
度 。 例 如 本 例 中 将 其 设置 为 【阻止 所 有 Cookie】， 包 括 该 计算 机 上 已 经 存在 的 
Cookie， 也 不 能 被 网 站 读 取 ， 如 图 17-3 所 示 。 
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17-3 【隐私 】 选 项 卡 


EC 如 果 只 是 想 禁 止 个 别 网 站 的 Cookie， 那 么 单 击 【 站 点 】 按 钮 ， 在 打开 的 【每 个 
站 点 的 隐私 操作 】 对 话 框 中 添加 需要 屏蔽 的 网 站 ， 然 后 单 击 【 阻 止 】 按 钮 ， 即 可 禁 
止 指定 网 站 的 Cookie， 如 图 17-4 所 示 。 
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ED 在 【隐私 】 选 项 卡 中 单 击 【 高 级 】 按 钮 ， 打 开 【 高 级 隐私 设置 】 对 话 框 ， 用 户 
可 以 对 第 一 方 Cookie 和 第 三 方 Cookie 进行 设置 。 其 中 第 一 方 Cookie 是 指正 在 浏览 
的 网 站 的 Cookie， 第 三 方 Cookie 是 指 非 正 在 浏览 的 网 站 的 Cookie。 选 择 【 蔡 代 自 动 
cookie 处 理 】 复 选 框 ， 然 后 在 【第 一 方 Cookie】 列 表 中 选择 【接受 】 单 选 按钮 ， 
在 【第 三 方 Cookie】 列 表 中 选择 【阻止 】 单 选 按 钮 ， 最 后 单 击 【确定 】 即 可 ， 如 
图 17-5 所 示 。 


etenren Cookie 的 网 站 ,不 管 其 隐私 策略 如 
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ED 
EE | 
图 17-4 【每 个 站 点 的 隐私 操作 】 对 话 框 图 17-5 【高 级 隐私 设置 】 对 话 框 


上 述 方法 对 于 以 文本 存在 的 Cookie 非常 有 效 。 对 于 在 内 存 保存 的 Cookie， 用 户 可 以 通过 
注册 表 来 禁止 ， 具 体操 作 步 又 如 下 。 
EC) 在 系统 桌面 上 单 击 【 开 始 】 按 钮 ， 在 弹出 的 菜单 中 选择 【和 运行】 命令， 打开 
【和 运行】 对 话 框 ， 在 【打开 】 文 本 框 中 输入 “regedit”， 然 后 单 击 【确定 】 按 钮 ， 
如 图 17-6 所 示 。 
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17-6 【运行 】 对 话 框 


打开 【注册 表 编 辑 器 】 窗 口 ， 依 次 展开 HKEY_LOCAL MACHINE/SOFTWARE/ 
Microsoft/Windows/CurrentVersion/Internet Settions/Cache/Special Paths/Cookise 分 支 ， 
右 击 ， 在 弹出 的 快捷 菜单 中 选择 【删除 】 命 令 ， 如 图 17-7 所 示 。 
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rsionynternet Setings\Cache\Special Paths\Cookies 


17-7 【注册 表 编 辑 器 】 窗 口 


ED 弹出 【确认 项 删除 】 对 话 框 ， 单 击 【 是 】 按 钮 ， 即 可 禁止 Cookie 的 作用 ， 如 
图 17-8 所 示 。 


人 确实 要 永久 删除 这 个 项 和 所 有 其 子 项 吗 ? 


图 17-8 【确认 项 删除 】 对 话 框 
17.1.2 保存 Cookie 数据 


hecl23 国 - RG htpy//wwwheol23 


通过 IE 浏览 器 的 【导入 和 导出 】 功 能 ， 用 户 可 以 保存 sane er 
Cookie，Cookie 保存 访问 信息 和 用 户 状态 ， 通 过 保存 Cookie 数 ee nn 
据 ， 用 户 可 以 便于 日 后 查看 和 恢复 数据 。 有 具体 操作 步骤 如 下 。 oe 
EC 在 IE 浏览 器 界面 中 选择 【文件 】 选 项 ， 然 后 在 弹 Ee ea 
出 的 快捷 菜单 中 选择 【导入 和 导出 】 命 令 ， 如 图 17-9 2 By 
所 示 。 的 和 加- Gulp 
EEIDp 打开 【导入 /导出 设置 】 对 话 框 ， 选 择 【 导 出 到 文 ee i 
件 】 单 选 按钮 ， 单 击 【 下 一 步 】 按 钮 ， 如 图 17-10 下 
所 示 。 i 


ECEDe 打开 【您 希望 导出 哪些 内 容 ? 】 对 话 框 ， 选 择 


Cookie 复 选 框 ， 单 击 【 下 一 步 】 按 钮 ， 如 图 17-11 图 17-9 选择 【导入 和 
所 示 。 导出 ] 命令 
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案例 课堂 四 … 
您 希望 如 何 导 入 或 导出 您 的 浏览 器 设置 ? 您 希望 导 出 饰 此 内容? 
从 另 一 个 浏览 器 中 号 入 以 ) 
日 办 文件 中 号 入 中 
夯 导 出 放 件 四 Cookie) 
[E39 [二 划 站 
图 17-10 【导入 /导出 设置 】 对 话 框 图 17-11 【您 希望 导出 哪些 内 容 ? 】 对 话 框 


EEC 打开 【您 希望 将 Cookie 导出 到 何 处 ? 】 对 话 框 ， 单 击 【 浏 览 】 按 钮 ， 设 置 导出 
的 路 径 。 设 置 完成 后 单 击 【 完 成 】 按 钮 ， 即 可 保存 Cookie， 如 图 17-12 所 示 。 


您 希望 将 Cookie 导出 至 何 处 ? 


键入 文件 路 径 惑 浏览 到 文件 


图 17-12 【您 希望 将 Cookie 导出 到 何 处 ? 】 对 话 框 


17.2 Cookie 的 常见 操作 


下 面 通过 案例 讲述 Cookie 在 网 页 制作 中 常用 的 操作 方法 和 技巧 。 


17.2.1 案例 一 一 创建 Cookie 
使 用 setcookie0 函 数 可 创建 Cookie， 它 的 语法 格式 如 下 : 


setcookie (name, value, expire, path, domain, secure) 


其 中 ，name 是 必需 的 ， 表 示 Cookie 的 名 称 ; value 是 可 选 的 ， 表 示 Cookie 变量 的 值 ; 
expire 是 可 选 的， 表示 Cookie 的 失效 时 间 ; path 是 可 选 的 ， 表 示 Cookie 在 服务 器 的 有 效 路 
径 ，domain 是 可 选 的 ， 表 示 Cookie 的 有 效 域名 ; secure 是 可 选 的， 表示 Cookie 是 否 仅 通过 
安全 的 https， 值 为 0 或 1， 若 值 为 1， 则 表示 cookie 只 能 在 https 连接 上 有 效 ， 若 值 为 默认 值 
0， 则 表示 Cookie 在 http 和 https 连接 上 均 有 效 。 


[es 


【 例 17.1】 创 建 名 为 user 的 cookie， 为 它 赋值 “"Cookie 保存 的 值 "*”， 并 规定 该 cookie 
的 过 期 天 数 。 代 码 如 下 : 


function setCookie (c name,value,expiredays) 

{ 

C name="user™; 

value="” Cookie 保存 的 值 "; 

expiredays= time()+3600 

Var exdate=new Date() 

exdate.setDate (exqate.getDate ()+expiredays)7 

// 设 置 失效 时 间 

document .cookie=c name+ "=" +escape (Value)+((expiredays==nul1l) ? ""” : 
"Fexpires="+exdate.toGMTString()) 7 


//escape () 汉字 转 成 unicode 编码 ，toGMTString () 把 日 期 对 象 转 成 字符 串 


slloo0 一 一 笨 党 否 壬 并 习 几 外 小 中 


运行 上 述 函 数 ， 会 在 Cookies 文件 夹 下 自动 生成 一 个 Cookie 文件 ， 它 将 天 数 转换 成 了 有 
效 的 日 期 ， 将 cookie 名 称 、 值 及 其 过 期 日 期 存 入 了 document.cookie 对 象 中 。 在 Cookie 失效 
后 ，Cookie 文件 将 被 自动 删除 。 


en 如 果 用 户 没有 设置 Cookie 的 到 期 时 间 ， 那 么 在 关闭 浏览 器 时 会 自动 删除 
装 ”Cookie 数据 。 


17.2.2 ”案例 一 一 读 取 Cookie 数据 


使 用 $_COOKIE 变量 可 取 回 cookie 的 值 。 下 面 通过 实例 讲解 如 何 取 回 【 例 17.1】 中 创建 
的 名 为 "user" 的 cookie 的 值 ， 并 把 它 显示 在 页 面 上 。 
【 例 17.2】 读 取 名 称 为 "user" 的 cookie 的 值 ， 代 码 如 下 : 


function getCookie (c name) 
{ 
c name="user"; 
if (document.cookie.length>0) 
{ 
c_start=document .cookie.indexOf (c_ name + "=") 
if (c start!=-1) 
{ 
C start=c start + c name.length+1 
c_end=document .cookie.indexOf (";",c start) 
if (c end==-1) c end=document .cookie.length 
return unescape (document .cookie.substring(c start,c end)) 
} 
} 
GE 学 


} 


17.2.3 ”案例 一 一 删除 Cookie 


常见 的 删除 Cookie 的 方法 有 两 种 ， 分 别 是 在 浏览 器 中 手动 删除 和 使 用 函数 删除 。 在 浏览 
器 中 删除 Cookie 的 方法 在 前 面 的 章节 中 已 经 讲 过 ， 本 节 及 讲述 使 用 函数 删除 Cookie 的 
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方法 。 
【 例 17.3】 删除 名 称 为 "user” 的 cookie， 代 码 如 下 : 


function delCookie (name) 
! 
C name="user™; 
Var exp = new Date(); 
exp.setTime (exp.getTime() - 1); 
Var cval=getCookie (name); 
if(cval!=null) 
document .cookie= name + "="+cval+";expires="+exp.toGMTString(); 


} 


在 上 述 代码 中 ，setTime 函数 返回 的 是 当前 的 系统 时 间 ， 把 过 期 时 间 减 少 1 秒 ， 这 样 过 期 
时 间 就 会 变 成 过 去 的 时 间 ， 从 而 删除 Cookie。 


17.3 ”实战 演练 一 一 在 欢迎 界面 中 设置 和 检查 Cookie 


在 本 实例 中 ， 除 了 需要 创建 和 读 取 Cookie 以 外 ， 还 需要 创建 一 个 检查 函数 。 该 函数 的 作 
用 是 : 如 果 cookie 已 被 设置 好 ， 则 显示 欢迎 词 ， 否 则 显示 提示 框 来 要 求 用 户 输入 名 字 。 该 函 
数 的 代码 如 下 : 


function checkCookie () 


{ 


username=getCookie('username') 


if (username!=null && username!="") 
{alert (' 欢 迎 再 次 光临 '+username+'!')} 
else 


{ 
username=prompt (' 请 输入 的 用 户 名 : ',"") 
if (username!=null && username!="") 
{ 
setCookie('username',username,365) 
} 
} 


整个 页 面 的 全 部 代码 如 下 : 


<html> 
<head> 
<script type="text/javascript"> 
function getCookie(c name) 
{ 
if (document .cookie.length>0) 
{ 
c start=document .cookie.indexOf (c name + "=") 
Eo startls=1h 
{ 
c start=c start + ¢ name.length+l1 
c end=document .cookie.indexOf (";",c start) 
if (c end==-1) c end=document.cookie.length 


return unescape (document .cookie.substring(c start,c end) ) 
} 
} 
retura ” 
} 
function setCookie(c name,value,expiredays) 
{ 
Var exdate=new Date() 
exdate.setDate (exdate.getDate () texpiredays) 
document .cookie=c name+ "=" tescape(value)+ 
((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) 
3 
function checkCookie() 
{ 
username=getCookie('username') 
if (username!=null && username!="") 
{alert (' 欢 迎 再 次 光临 '+username+'!')} 
else 
{ 
username=prompt (' 请 输入 的 用 户 名 : ',，"") 
if (username!=null && username!="") 
{ 
setCookie('username',username,365) 
} 
} 
;| 
</script> 
</head> 
<body onLoad="checkCookie()"> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 预览 效果 如 图 17-13 所 示 。 

输入 用 户 名 后 单 击 【确定 】 按 钮 ， 然 后 刷新 页 面 ， 弹 出 提示 对 话 框 ， 如 图 17-14 所 示 ， 
单 击 【 确 定 】 按 钮 即 可 。 
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17.4” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: 设置 Cookie。 
练习 2: 保存 Cookie 数据 。 
练习 3: 创建 Cookie。 
练习 4: 读 取 Cookie 数据 。 
练习 5: 删除 Cookie。 


17.5 高 手 甜 点 


甜点 1: Cookie 的 路 径 如 何 设置 ? 
cookie 的 路 径 设 置 方 法 如 下 : 


path=URL; 

如 果 是 在 域名 的 子 目录 创建 的 cookie， 那 么 域名 及 其 同 级 目录 或 上 级 目录 是 访问 不 到 该 
cookie 的 。 而 通过 设置 路 径 的 好 处 就 是 可 以 上 域名 以 及 域名 的 子 类 目录 都 可 以 访问 得 到 该 
cookie。 实 现代 码 如 下 : 


document .cookie='cookieName=cookieValue;expires=expireDate;path=/'。 


甜点 2: Cookie 的 域 如 何 设置 ? 
cookie 的 域 设 置 方 法 如 下 : 


domain=siteDomain; 

这 个 主要 用 在 同 域 的 情况 下 共享 一 个 cookie， 例 如 "www.qiangu.com" 与 "ued. 
qiangu.com" 两 者 是 共享 一 个 域名 " qiangu.com"。 如 果 想 让 "www. qiangu.com" 下 的 cookie 被 
"ued. qiangu.com" 访问 ， 那 么 就 需要 把 path 属性 设置 为 ""， 并 且 设 置 cookie 的 域 如 下 : 


domain-->document .cookie='cookieName=cookieValue;expires=expireDate;path=/; 
domain=qiangu.com"' 


全 2 


利用 它 可 以 存储 
的 替代 


有 复杂 结构 的 数据 信息 。XML 是 HTML 的 补充 ， 但 XML 并 不 是 HTML 的 替代 
品 。 在 未 来 的 网 页 开发 中 ，XML 将 被 用 来 描述 、 存 储 数据 ， 而 了 H 


式 化 和 显示 数据 。 本 章 主要 讲述 JavaScript 


TML 则 被 用 来 格 


中 的 XML 编程 方法 和 技巧 。 


XML 是 一 种 标准 化 的 文本 格式 ， 在 Web 中 表示 结构 化 信息 ， 
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18.1 XML 编程 基础 


可 扩展 标记 语言 (XML) 是 Web 上 的 数据 通用 语言 ， 它 能 使 开发 人 员 将 结构 化 的 数据 ， 从 
许多 不 同 的 应 用 程序 传递 到 桌面 ， 进 行 本 地 计算 和 演示 。XML 人 允许 为 特定 应 用 程序 创建 唯一 
的 数据 格式 ， 它 还 是 在 服务 器 之 间 传 输 结构 化 数据 的 理想 格式 。 


18.1.1 XPath 简介 


XPath 主要 用 于 对 XML 文档 元 件 寻 址 。XPath 将 一 个 XML 文档 建 模 成 一 棵 节点 树 ， 它 
有 不 同类 型 的 节点 ， 包 括 元 素 节点 、 属 性 节点 和 正文 节点 。XPath 定义 了 一 种 方法 用 来 计算 每 
类 节点 的 字 串 值 。 由 于 XPath 充分 支持 XML 命名 空间 ， 所 以 ， 节 点 的 名 字 被 建 模 成 由 一 个 局 
域 部 分 和 可 能 为 空 的 命名 空间 URI 组 成 的 对 ， 被 称 为 扩展 名 。 


1. XPath 节点 


XPath 把 XML 文档 看 作 是 一 个 节点 树 。 节 点 有 不 同 的 类 型 有 的 类 型 的 节点 名 称 由 XML 
名 称 空间 URI( 允 许 空 ) 和 本 地 部 分 组 成 。 特 殊 的 节点 类 型 是 根 节点 。 一 个 XML 文档 只 能 有 一 
个 根 节 点 ， 它 是 树 的 根 ， 包 含 整 个 XML 文档 。 但 是 根 节点 包含 根 元 素 以 及 在 根 元 素 之 前 或 之 
后 出 现 的 任何 处 理 节 点 、 声 明 节点 或 者 注释 节点 。 元 素 节点 代表 XML 文档 中 的 每 个 元 素 。 属 
性 节点 附属 于 元 素 节点 ， 表 示 XML 文档 中 的 属性 。 其 他 类 型 的 节点 包括 文本 节点 、 处 理 指 令 
节点 和 注释 节点 。 


2. 位 置 路 径 


位 置 路 径 是 XPath 中 最 有 用 也 是 应 用 最 广泛 的 特性 。 位 置 路 径 是 XPath 表达 式 的 特殊 
化 。 位 置 路 径 标 识 了 和 上 下 文 有 关 的 一 组 XPath 节点 。XPath 定义 了 简化 和 非 简化 两 种 语法 。 


18.1.2 XSLT 简介 


XSLT 由 XSL(Extensible Stylesheet Language) 发 展 而 来 。XSLT 是 一 种 基于 XML 的 语 
言 ， 用 于 将 一 类 XML 文档 转换 成 另 一 种 XML 文档 。XSLT 实际 上 就 是 XML 文档 类 的 一 个 
规范 ， 即 XSLT 本 身 是 格式 正确 的 XML 文档 ， 并 带 有 一 些 专门 的 内 容 ， 可 以 让 开发 者 或 用 户 
“模块 化 ”自己 所 期 望 的 输出 格式 。XSLT 的 作用 是 将 来 源 于 XML 的 元 素 转 换 成 用 户 所 期 望 
的 格式 文件 中 的 元 素 ， 所 以 与 其 他 语言 不 同 的 是 ，XSLT 是 一 种 模板 驱动 的 转换 脚本 。 其 实现 
过 程 是 把 模板 提供 给 XSLT 处 理 器 ， 并 指明 在 进行 转换 时 何 时 何 地 使 用 模板 。 在 模板 中 ， 可 
以 加 入 指令 ， 以 告诉 处 理 器 从 一 个 或 多 个 源 文件 中 自行 搜索 信息 ， 并 插入 模板 中 的 空位 。 

XSLT 主要 的 功能 就 是 转换 ， 可 将 一 个 没有 形式 表现 的 XML 内 容 文档 作为 一 个 源 树 ， 将 
其 转换 为 一 个 有 样式 信息 的 结果 树 。XSLT 将 模式 (pattern) 与 模板 (template) 相 结合 ， 模 式 与 源 
树 中 的 元 素 相 匹配 ， 模 式 被 实例 化 后 产生 部 分 结果 树 。 结 果树 与 源 树 是 分 离 的 ， 所 以 结果 树 


的 结构 可 以 和 源 树 截然 不 同 。 在 结果 树 的 构造 中 ， 可 以 过 滤 和 重新 排序 源 树 ， 还 可 以 增加 任 
意 的 结构 。 模 式 实际 上 是 满足 规定 条 件 的 节点 的 结合 ， 符 合 条 件 的 节点 就 匹配 该 模式 ， 反 之 
则 不 匹配 。 

XSLT 包含 了 一 套 模板 的 集合 ， 一 个 模板 规则 有 两 部 分 : 匹配 源 树 中 节点 的 模式 以 及 实例 
化 后 组 成 部 分 结果 树 的 模板 。 一 个 模板 中 包含 一 些 元 素 ， 其 作用 就 是 规定 字面 结果 的 元 素 结 
构 。 一 个 模板 还 包含 作为 产生 结果 树 片断 的 指令 元 素 。 当 一 个 模板 实例 化 之 后 ， 执 行 每 一 个 
指令 并 置换 为 其 产生 结果 树 片断 。 指 令 选择 并 处 理 这 些 子 元 素 ， 通 过 查找 可 供应 用 的 模板 规 
则 然后 实例 化 其 模板 ， 对 子 元 素 处 理 后 产生 结果 树 片断 。 

元 素 只 有 被 执行 的 指令 选中 才能 进行 处 理 ， 在 搜索 可 用 模板 规则 的 过 程 中 ， 可 能 会 有 多 
个 模板 规则 符合 给 定 元 素 的 模式 ， 但 是 只 能 使 用 一 个 模板 的 规则 与 给 定 元 素 的 模式 匹配 。 
XSL 用 XML 的 命名 空间 来 区 别 属于 XSL 处 理 器 指令 的 元 素 和 规定 文字 结果 的 树 结构 元 素 ， 
指令 元 素 属于 XSL 名 域 。 在 文档 中 采用 xsl: 表示 XSL 名 域 中 的 元 素 。 一 个 XSLT 包含 一 个 
xsl: stylesheet 文档 元 素 ， 该 元 素 又 包含 用 来 规定 模板 的 规则 的 xsl: stylesheet 元 素 。XSLT 的 
转换 过 程 如 图 18-1 所 示 。 


XSL 样式 表 厂 涂 X5L 样式 表 


打印 文档 


其 地 媒体 
设备 (如 
DVD 等 ) 


18-1 XSLT 转换 过 程 
18.2 XML 语法 基础 


XML 是 标记 语言 ， 可 支持 开发 者 为 Web 信息 设计 自己 的 标记 。XML 要 比 HTML 强大 得 
多 ， 它 不 再 是 固定 的 标记 ， 而 是 允许 定义 数量 不 限 的 标记 描述 文档 中 的 资料 ， 允 许 嵌 套 的 信 
息 结 构 。 


18.2.1 案例 一 一 XML 的 基本 应 用 
随 着 互联 网 的 发 展 ， 为 了 控制 网 页 显示 样式 ， 就 增加 了 一 些 描述 如 何 显现 数据 的 标记 ， 
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例如 <center>、<b> 等 标记 。 但 随 着 HTML 的 不 断 发 展 ，W3C 组 织 意识 到 HTML 存在 一 些 无 
法 避免 的 问题 。 

(1) 不 能 解决 所 有 解释 数据 的 问题 ， 例 如 影音 文件 或 化 学 公式 、 音 乐 符 号 等 其 他 型 态 的 
内 容 。 
(2) 效能 问题 ， 需 要 下 载 整 份 文 件 ， 才 能 开始 对 文件 做 搜寻 的 动作 。 

(3) 扩充 性 、 弹 性 、 易 读 性 均 不 佳 。 
为 了 解决 以 上 问题 ， 专 家 们 使 用 SGML 精简 制作 ， 并 依照 HTML 的 发 展 经 验 ， 产 生出 一 
套 使 用 规则 严谨 ， 但 是 简单 的 描述 数据 语言 : XML。 

XML(eXtensible Markup Language， 可 扩展 标记 语言 ) 是 W3C 推荐 参考 通用 标记 语言 ， 同 
样 也 是 SGML 的 子 类 ， 可 以 定义 自己 的 一 组 标记 。 它 具有 下 面 几 个 特点 。 

(1) XML 是 一 种 元 标记 语言 ， 所 谓 “ 元 标记 语言 ”就 是 开发 者 可 以 根据 自己 需要 定义 自 
己 的 标记 。 

(2) 允许 通过 使 用 自 定义 格式 ， 标 识 、 交 换 和 处 理 数据 库 可 以 理解 的 数据 。 

(3) 基于 文本 的 格式 ， 人 允许 开发 人 员 描 述 结构 化 数据 并 在 各 种 应 用 之 间 发 送 和 交换 这 些 
数据 。 

(4) 有 助 于 在 服务 器 之 间 传 输 结构 化 数据 。 

(5) XML 使 用 的 是 非 专 有 的 格式 ， 不 受 版 权 、 专 利 、 商 业 秘密 或 是 其 他 种 类 的 知识 产权 
的 限制 。XML 的 功能 非常 强大 ， 同 时 对 于 人 类 或 计算 机 程序 来 说 ， 都 容易 阅读 和 编写 。 因 而 
成 为 交换 语言 的 首选 。 网 络 带 给 人 类 的 最 大 好 处 是 信息 共享 ， 在 不 同 的 计算 机 上 发 送 数据 ， 
而 XML 是 用 来 告诉 我 们 “数据 是 什么 ”， 利 用 XML 可 以 在 网 络 上 交换 任何 一 种 信息 。 

【 例 18.1】 (实例 文件 ，ch18\18.1.xml)。 代 码 如 下 : 

<?xml] version="1.0" encoding="GB2312" ?> 

< 电器 > 

< 家 用 电器 > 

< 品牌 > 小 天 鹅 洗衣 机 </ 品 牌 > 

< 购买 时 间 >2014-03-015</ 购 买 时 间 > 

< 价格 币 种 =" 人 民 币 ">899 元 </ 价 格 > 
</ 家 用 电器 > 

< 家 用 电器 > 

< 品牌 > 海尔 冰箱 </ 品 牌 > 

< 购买 时 间 >2014-03-15</ 购 买 时 间 > 

< 价格 币 种 =" 人 民 币 ">3990</ 价 格 > 
</ 家 用 电器 > 

</ 电 器 > 


此 处 需要 将 文件 保存 为 XML 文件 。 在 该 文件 中 ， 每 个 标记 都 用 汉语 编写 ， 是 自 定义 标 
记 。 整 个 电器 是 一 个 对 象 ， 该 对 象 包 含 了 多 个 家 用 电器 ， 家 用 电器 是 用 来 存储 电器 的 相关 信 
息 的 ， 也 可 以 说 家 用 电器 对 象 是 一 种 数据 结构 模型 。 在 页 面 中 没有 对 那个 数据 的 样式 进行 修 
饰 ， 而 只 告诉 我 们 数据 结构 是 什么 ， 数 据 是 什么 。 

上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 18-2 所 示 。 单 击 -可 以 关闭 整个 树 形 结构 ， 单 
击 + 可 以 展开 树 形 结构 。 


下 Hauserswdminis P - © XB HUsersWdninisr. x 
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</ 虽 扯 > 


网 天 时 间 >2014-03-015</ 购 天 时 间 > 


< 价格 而 神 =" 人 民 而 ">899 元 </ 前 村 > 
</ 要 用 电 闫 > 

-~ < 家 性 电器 > 

< 品种 > 光 尔 冰 往 </ 品 徐 > 


18-2 XML 文件 显示 效果 


18.2.2 ”案例 一 一 XML 文档 组 成 和 声明 


一 个 完整 的 XML 文档 由 声明 、 元 素 、 注 释 、 字 符 引 
用 和 处 理 指令 组 成 。 在 文档 中 ， 所 有 这 些 XML 文档 的 组 
成 部 分 都 是 通过 元 素 标 记 来 指明 的 。XML 文档 可 分 为 3 
个 部 分 ， 如 图 18-3 所 示 。 


XML 声明 必须 作为 XML 文档 的 第 一 行 ， 行 首 不 能 有 人 
空白 、 注 释 或 其 他 的 处 理 指令 。 完 整 的 声明 格式 如 下 ， 让 


<?xml version="1.0"” encoding=" 编 码 " 
standalone="yes/no" ?> 


其 中 version 属性 不 能 省 略 ， 且 必须 在 属性 列表 中 排 
在 第 一 位 ， 指 明 所 采用 的 XML 的 版 本 号 ， 值 为 1.0。 该 属 图 18-3 XML 文档 组 成 
性 用 来 保证 对 XML 未 来 版 本 的 支持 。encoding 属性 是 可 选 属 性 。 该 属性 指定 了 文档 采用 的 编 
码 方式 ， 即 规定 了 采用 哪 种 字符 集 对 XML 文档 进行 字符 编码 。 常 用 的 编码 方式 为 UTF-8 和 
GB2312。 如 果 没 有 使 用 encoding 属性 ， 那 么 该 属性 的 默认 值 是 UTF-8; 如 果 encoding 属性 值 
设置 为 GB2312， 则 文档 必须 使 用 ANSI 编码 保存 ， 文 档 的 标记 以 及 标记 内 容 只 能 使 用 ASCII 
字符 和 中 文 。 

使 用 GB2312 编码 的 XML 声明 如 下 : 


<?xml version="1.0" encoding="GB2312" ?> 


XML 文档 主体 必须 有 根 元 素 。 所 有 的 XML 必须 包含 可 定义 根 元 素 的 单一 标记 对 。 所 有 
其 他 的 元 素 都 必须 处 于 这 个 根 元 素 内 部 。 所 有 的 元 素 均 可 拥有 子 元 素 。 子 元 素 必须 被 正确 地 
嵌 套 在 它们 的 父 元 素 内 部 。 根 标记 以 及 根 标记 内 容 共同 构成 XML 文档 主体 。 没 有 文档 主体 的 
XML 文档 将 不 会 被 浏览 器 或 其 他 XML 处 理 程序 所 识别 。 

尽管 XML 解析 器 通常 会 忽略 文档 中 的 注释 ， 但 位 置 适 当 且 有 意义 的 注释 可 以 大 大 提高 文 
档 的 可 读 性 。 所 以 XML 文档 中 不 是 描述 数据 的 内 容 都 可 以 包含 在 注释 中 。 注 释 以 <!-- 开 始 ， 
以 --> 结 束 ， 在 起 始 符 和 结束 符 之 间 为 注释 内 容 。 注 释 内 容 可 以 输入 符合 注释 规则 的 任何 字 
符 串 。 
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【 例 18.2】 (实例 文件 ，ch18\18.2.xml)。 代 码 如 下 : 


<?xml version="1.0" encoding="gb2312"?> 
<! 一 -这 是 一 个 优秀 学 生 名 单 --> 
< 学 生 名 单 > 
< 学 生 > 
< 姓名 > 刘 五 </ 姓 名 > 
< 学 号 >21</ 学 号 > 
< 性 别 > 男 </ 性 别 > 
</ 学 生 > 
< 学 生 > 
< 姓名 > 张 三 </ 姓 名 > 
< 学 号 >22</ 学 号 > 
< 性 别 > 女 </ 性 别 > 
</ 学 生 > 
</ 学 生 名 单 > 


在 上 述 代码 中 ， 第 一 句 代码 是 一 个 XML 声明 。< 学 生 > 标记 是 < 学 生 名 单 > 标记 的 子 元 
素 ， 而 < 姓名 > 标记 和 < 学 号 > 标记 是 < 学 生 > 的 子 元 素 。<!----> 是 一 个 注释 。 
上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 18-4 所 示 。 
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<?xml version="1.0" encoding="GB2312"?> 
<!-- 这 是 一 个 优秀 字 生 名 单 --> 
~ < 学 生 名 单 > 
- < 学 生 > 
< 姓名 > 刘 五 </ 姓 名 > 
< 学 号 >21</ 学 号 > 司 
< 性 别 > 男 </ 性 别 > 
</ 学 生 > 
- < 学 生 > 
< 姓名 > 张 三 </ 姓 名 > 
< 学 号 >22</ 学 号 > 
< 性 别 > 女 </ 性 别 > 
</ 学 生 > 
</ 学 生 名 单 > 
用 100% ~ 


图 18-4 XML 文档 组 成 效果 
18.2.3 ”案例 一 一 XML 元 素 介绍 


元 素 以 树 形 分 层 结构 排列 ， 它 可 被 嵌 套 在 其 他 元 素 中 。 

1. 元 素 类 别 

在 XML 文档 中 ， 元 素 被 分 为 非 空 元 素 和 空 元 素 两 种 类 型 。 一 个 XML 非 空 元 素 由 开始 标 
记 、 结 束 标记 以 及 标记 之 间 的 数据 构成 。 开 始 标记 和 结束 标记 用 来 描述 标记 之 间 的 数据 。 标 
记 之 间 的 数据 被 认为 是 元 素 的 值 。 非 空 元 素 的 语法 结构 如 下 : 

< 开始 标记 > 文本 内 容 </ 结 束 标记 > 

而 空 元 素 不 包含 任何 内 容 的 元 素 ， 即 开始 标记 和 结束 标记 之 间 没 有 任何 内 容 的 元 素 。 其 
语法 结构 如 下 : 


< 开始 标记 ></ 结 束 标记 > 
以 元 素 内 容 为 文本 的 非 空 元 素 可 转换 为 以 下 空 元 素 : 
<hello> 下 午 好 </hello> 


<hello> 是 一 个 非 空 元 素 ， 如 果 把 非 空 元 素 的 文本 内 容 转 换 为 空 元 素 的 属性 ， 那 么 转换 后 
的 空 元 素 可 写作 : 


<hello content=" 下 午 好 "></hello> 
2. 元 素 命名 规范 


XML 元 素 命名 规则 与 Java、C 等 命名 规则 类 似 ， 它 也 是 一 种 对 大 小 写 敏感 的 语言 。XML 
元 素 命名 必须 遵守 下 列 规则 。 

(1) 元 素 名 中 可 以 包含 字母 、 数 字 和 其 他 字符 。 例 如 <place>、< 地 点 >、<no123> 等 。 元 
素 名 中 虽然 可 以 包含 中 文 ， 但 是 在 不 支持 中 文 的 环境 中 将 不 能 够 解释 包含 中 文字 符 的 XML 
文档 。 

(2) 元 素 名 中 不 能 以 数字 或 标点 符号 开头 。 例 如 <123no>、<.name>、<?error> 元 素 名 称 都 
是 非法 名 称 。 

(3) 元 素 名 中 不 能 包含 空格 。 例 如 <no 123>。 


3. 元 素 嵌 套 


元 素 的 内 容 可 以 包含 子 元 素 。 子 元 素 本 身 也 是 元 素 ， 被 嵌 套 在 上 层 元 素 之 内 。 如 果子 元 
素 嵌 套 了 其 他 元 素 ， 那 么 它 同时 也 是 父 元 素 。 例 如 以 下 代码 ;: 


<?xml version="1.0" encoding="gb2312" ?> 
<students> 
<student> 
<name> 张 三 </name> 
<age>20</age> 
</student> 


</students> 


<student> 是 <students> 的 子 元 素 ， 同 时 也 是 <name> 和 <age> 的 父 元 素 ， 而 <name> 和 <age> 
是 <student> 的 子 元 素 。 
【 例 18.3】 (实例 文件 ，ch18\18.3.xml)。 代 码 如 下 : 


<?xml version="1.0" encoding="gb2312" ?> 
< 通讯 录 > 
<!--" 记 录 " 标 记 中 包含 姓名 、 地 址 、 电 话 和 电子 邮件 --> 
< 记录 date="2011/2/1"> 
< 姓名 > 张 三 </ 姓 名 > 
< 地 址 > 河南 省 郑州 市 中 州 大 道 </ 地 址 > 
< 电话 >0371-12345678</ 电 话 > 
< 电子 邮件 >zs@tom.com</ 电 子 邮 件 > 
</ 记 录 > 
< 记录 date="2014/3/12"> 
< 姓名 > 李 四 </ 姓 名 > 
< 地 址 > 河北 省 邯郸 市 工农 大 道 </ 地 址 > 
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< 电话 >13012345678</ 电 话 > 
</ 记 录 > 
< 记录 date="2014/2/23"> 
< 姓名 > 王 五 </ 姓 名 > 
< 地 址 > 吉林 省 长 春 市 幸福 路 </ 地 址 > 
< 电话 >13112345678</ 电 话 > 
< 电子 邮件 >wangwuesina.com</ 电 子 邮 件 > 
</ 记 录 > 
</ 通 讯 录 > 


在 上 述 代 码 中 ， 第 一 行 是 XML 的 声明 ， 它 声明 该 文档 是 XML 文档 ， 文 档 所 遵守 的 版 本 
号 是 XML 1.0 版 本 规范 ， 字 符 编码 是 gb2312 编码 方式 。< 记 录 > 是 < 通讯 录 > 的 子 标记 ， 但 < 记 
录 > 标 记 同 时 是 < 姓名 > 和 < 地 址 > 等 标记 的 父 元 素 。 

上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 18-5 所 示 。 从 中 可 以 看 到 页 面 显示 了 一 个 树 
形 结构 ， 每 个 标记 中 间 都 包含 相应 的 数据 。 
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州 大 南 </ 坦 芷 > 


> 
地 直 市 中 

< 电话 >0371-12345678</ 电 活 > 

< 电子 邮件 >zs@tom.com </ 电 子 邮 牢 > 


</ 记 录 > 
-< 记录 date="2014/3/12"> 


< 和 活 >13012345678</ 电 渗 > 


</ 记 录 > 
-< 忆 录 date="2014/2/23"> 

< 姓名 > 王 五 </ 灶 名 > 

< 闻 址 > 吉林 省 长 春 市 幸 篇 路 </ 泊 址 > 

< 电话 >13112345678</ 电 后 > 

< 电子 邮件 >wangwu@sina.com</ 电 于 邮件 > 

</ 记 录 > 

</ 通 讯 录 > 


图 18-5 “元 素 包含 
18.3 CSS 修饰 XML 文件 


XML 文档 本 身 只 包含 数据 ， 但 是 没有 关于 显示 数据 样式 的 信息 。 如 果 需 要 将 XML 文档 
数据 美观 地 显示 出 来 ， 而 不 是 以 树 形 结构 显示 ， 那 么 可 以 通过 CSS 控制 XML 文档 中 各 个 元 
素 的 呈现 方式 。 


18.3.1 案例 一 一 XML 使 用 CSS 


XML 文档 数据 需要 使 用 CSS 属性 定义 显示 样式 ， 其 方法 是 把 CSS 代码 做 成 独立 文件 ， 
然后 引入 到 XML 中 。 在 XML 文档 引入 样式 表 CSS， 可 以 将 数据 的 内 容 和 表示 分 离 出 来 ， 实 


现 CSS 的 重复 使 用 。 
要 想 在 XML 文件 中 引用 CSS 文件 ，XML 文件 必须 使 用 以 下 操作 指令 : 


<?xml-stylesheet href=”URI” type=”text/css”?> 


G0 


a 


xml-stylesheet 表示 在 这 里 使 用 的 是 样式 表 。 样 式 表 的 URI 表示 的 是 要 引入 文件 的 所 在 路 
径 。 如 果 只 是 一 个 文件 的 名 字 ， 那 么 该 CSS 文件 必须 和 XML 文档 在 同一 个 目录 下 。 如 果 
URI 是 一 个 链接 ， 那 么 该 链接 必须 有 效 。type 表示 该 文件 所 属 的 类 型 是 文本 ， 其 内 容 是 CSS 
代码 。 

【 例 18.4】 

(1) (实例 文件 ，ch18\18.4.xml)。 代 码 如 下 : 


<?xml Version="1.0"” encoding="GB2312" ?> 
<?xml-stylesheet type="text/css" href="18.4.css"?> 
<student> 

<name> 孙 福全 </name> 

<sex> 男 </sex> 

<name> 王 小 玲 </name> 

<sex> 女 </sex> 

</student> 


(2) (实例 文件 ，ch18\18.5.css)。 代 码 如 下 : 


student{ 
background-color: #ddeecc; 
font-family:" 幼 圆 "; 
text-align:center; 
display:block; 

| 

name{ 
font-size:20px; 
color:red; 

} 

sex{ 
font-size:12px; 
font-style:italic; 


上 述 代码 针对 student、name 和 sex 3 个 标记 ， 设 置 了 不 同 的 显示 样式 。 例 如 字号 大 小 、 
字体 颜色 、 对 齐 方式 等 。 

上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 18-6 所 示 。 从 中 可 以 看 到 XML 文档 不 再 是 
以 树 形 结构 显示 ， 也 没有 标记 出 现 ， 而 只 是 显示 了 其 标记 中 的 数据 。 
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图 18-6 XML 引入 CSS 文件 显示 效果 
18.3.2 ”案例 一 一 设置 字体 属性 
CSS3 样式 表 提 供 了 多 种 字体 属性 ， 使 页 面 效 果 更 加 丰富 。 例 如 font-style、font-variant、 
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font-weight、font-size 和 font-family 等 属性 ， 这 些 属性 前 面 已 介绍 过 
字体 属性 ， 同 样 可 以 应 用 于 XML 文件 元 素 。 


【 例 18.5】 
(1) (实例 文件 ，ch18\18.5.xml)。 代 码 如 下 : 


<?xml version="1.0" encoding="gb2312"?> 
<?xml-stylesheet href="18.5.css" type="text/css"?> 
<company> 
<name> 水 月 网 页 设计 工作 室 </name> 
<adqress> 郑 州 市 花园 路 松 风 大 夏 </adaress> 
<phone>13012345678</phone> 
</company> 


(2) (实例 文件 ，ch18\18.5.css)。 代 码 如 下 : 


companyt{ 
color: #ddeecc; 
font:normal small-caps bolder 15pt " 幼 圆 " ; 
background-color:#123543 
} 
name{ 
font-size:30px; 
display:block; 
} 
address{ 
font-size: 12px; 
display:block; 
3 
phone{ 
font-size: 12px; 
font-style:italic; 
display:block; 
} 


， 此 处 就 不 再 重复 。 这 些 


上 述 代码 针对 XML 中 的 标记 ， 进 行 了 字体 、 背 景 颜 色 和 前 景色 的 设置 。 
在 下 9.0 浏览 器 中 上 述 代码 的 显示 效果 如 图 18-7 所 示 。 从 中 可 以 看 到 网 页 显示 了 一 个 公 


司 的 介绍 信息 ， 其 中 字号 大 小 不 一 样 ， 联 系 方式 以 斜体 显示 。 
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图 18-7 CSS 定义 XML 字体 属性 效果 
18.3.3 ”案例 一 一 设置 色彩 属性 
颜色 和 背景 是 网 页 设计 时 两 个 重要 的 因素 。 一 个 颜色 搭配 协调 、 
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引 不 少 访问 者 。CSS 的 强大 功能 表现 在 控制 颜色 和 背景 方面 同样 发 挥 得 淋漓 尽 致 。XML 元 素 
的 背景 可 设置 成 一 种 颜色 或 一 幅 影 像 。 

在 CSS3 中 ， 如 果 需 要 设置 文本 颜色 ， 即 网 页 前 景色 ， 通 常 使 用 color 属性 ， 定 义 元 素 背 
景 ， 其 属性 有 background-color 、 background-image 、 background-repeat 、 background- 
attachment、background-position。 这 些 前 面 都 已 介绍 过 ， 这 里 就 不 再 介绍 了 。 

【 例 18.6】 

(1) (实例 文件 ，ch18\18.6.xml)。 代 码 如 下 : 

<?xml Version="1.0"” encoding="GB2312" ?> 

<?xml-stylesheet href="18.6.css" type="text/css" ?> 

<img> 

插花 


</img> 


(2) (实例 文件 ，ch18\18.6.css)。 代 码 如 下 : 


img{ 
display:block; 
color:red; 
text-align:center; 
font-size:40px; 
top:170px; 
background-image:URL("08.jpg"); 
background-repeat:no-repeat; 


} 


上 述 CSS 代码 设置 背景 以 块 显示 ， 字 体 颜 色 为 红色 ， 字 符 大 小 为 40px， 并 居中 显示 。 
background-image 引入 背景 图 片 为 08.jpg， 并 设置 了 图 片 不 重复 。 

上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 18-8 所 示 。 从 中 可 以 看 到 页 面 背景 为 一 张 图 
片 ， 且 不 重复 ， 在 图 片上 显示 了 “插花 ”两 个 红色 字 。 
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18.3.4 ”案例 一 一 设置 边框 属性 


在 CSS3 中 使 用 border-style、border-width 和 border-color 这 3 个 属性 可 设 定 边框 。 页 面 
元 素 的 边框 是 元 素 内 容 及 间隙 包含 在 其 中 的 边线 。 页 面 元 素 边框 的 显示 外 观 由 宽度 、 样 式 和 
颜色 这 3 个 方面 决定 。 

【 例 18.7】 

(1) (实例 文件 ，ch18\18.7.xml)。 代 码 如 下 : 


<?xml Version="1.0"” encoding="GB2312" ?> 
<?xml-stylesheet href="18.7.css" type="text/css" ?> 
<Border> 
<smallBorder> 
学 校 雷 锋 好 榜样 
</smallBorder> 
</Border> 


(2) (实例 文件 ，ch18\18.7.css)。 代 码 如 下 : 


Bordert{ 
border-style:solid; 
border-width:15px; 
border-color:#123456; 
width:200px; 
height:150px; 

text-align:center; 


} 

smallBordert{ 

font-size:20px; 

color:red; 

i 

上 述 代码 在 Border 标记 中 ,设置 了 边框 的 显示 样式 ， 例 如 直线 形 显示 ， 颜 色 为 深蓝 色 ， 
宽度 为 15px， 并 且 设置 显示 块 的 宽度 为 200px， 高 度 为 150px， 边 框 内 元 素 居中 显示 。 在 
smallBorder 标记 中 设置 了 字符 大 小 和 字体 颜色 。 

上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 18-9 所 示 。 从 中 可 以 看 到 页 面 中 显示 了 一 个 
边框 ， 边 框 中 显示 的 字 是 红色 。 
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18-9 设置 XML 元 素 边框 


18.3.5 “案例 一 一 设置 文本 属性 


在 CSS3 中 ， 提 供 了 多 种 对 文本 控制 的 属性 ， 例 如 text-indent 属性 、text-align 属性 、 
white-space 属性 、line-height 属性 、vertical-align 属性 、text-transform 属性 和 text-decoration 属 
性 。 这 些 前 面 已 经 介绍 过 ， 这 里 就 不 再 介绍 了 。 使 用 这 些 属性 ， 同 样 可 以 控制 XML 元 素 的 显 
示 样 式 。 

【 例 18.8】 

(1) (实例 文件 ，ch18\18.8.xml)。 代 码 如 下 : 


<?xml Version="1.0"” encoding="gb2312"?> 
<?xml-stylesheet type="text/css" href="18.8.css"?> 
<big> 
<one> 健 康 </one> 
<two> 
<title> 饮 茶 养 生养 颜 特殊 时 期 慎 饮 茶 </title> 
<content> 
金银花 ， 味 甘 ， 性 寒 ， 具 有 清热 解毒 、 朴 散 风 热 的 作用 。 金 银 花 为 清热 解毒 之 良药 ， 既 能 清 里 热 ， 又 能 
散 表 热 ， 临 床上 主要 用 于 治疗 各 种 痛 肿 疮 毒 、 热 毒 血 桨 及 温 热 病 等 。 金 银 花 药性 偏 寒 ， 不 适合 长 期 饮 
用 ， 仅 适合 在 炎热 的 夏季 暂时 饮用 以 防治 痢疾 。 
</content> 
</two> 
</big> 


(2) (实例 文件 ，ch18\18.8.css)。 代 码 如 下 : 


big{ 
width:500px; 
border:#6600FF lpx solid; 
height:200px; 
font-size:12px; 
font-family:" 幼 圆 "; 


} 

onef{ 
font-size:18px; 
width:500px; 
height:25px; 
line-height:25px; 
text-align:center; 
Color:#FF3300; 
margin-top:5px; 
font-weight:800; 

text-decoration:underline; 

} 

TELeT 
margin:10px 0 10px 10px; 
display:block; 
Color:#0033FF; 
font-size:14px; 
font-weight:800; 

text-align:center; 


} 


而 
a 
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content{ 
display:block; 
line-height:20px; 
width:490px; 
margin-left:10px; 
font-weight:800; 
text-indent:2em; 


} 


上 述 CSS 代码 分 别 定义 了 不 同 标记 的 显示 样式 ， 例 如 宽度 、 高 度 、 边 框 样式 、 字 体 大 
小 、 行 高 和 是 否 带 有 下 划 线 等 。 

上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 18-10 所 示 。 从 中 可 以 看 到 页 面 中 显示 了 一 
个 公告 栏 ， 栏 中 显示 了 不 同 的 颜色 字符 ， 并 且 段 落 缩 进 了 两 个 单元 格 。 


| 


天 天 
Ee mser erin Pp - © x Busersadminisvaror. x| | 
文件 (站 ”六 (E) 二 看 (V) 收藏 (A) 工具 TT 大 二 (HH) 


饮 茶 养生 养 关 特殊 时 期 慎 饮 茶 

金银花 ， 味 甘 ， 性 厌 ， 具 有 清 娄 解毒 . 疏散 风 玖 的 作用 。 人 金银花 为 清 娄 解毒 之 良药 ， 茎 | 
能 肖 里 热 ， 又 能 敌 表 允 ， 恪 庆 上 主要 用 于 治疗 各 种 宕 肝 弃 王 - 热 王 刘 请 及 妃 热 让 等 。 金 庚 逢 | 
药性 偏 赛 ， 不 适合 长 期 饮用 。 仅 适合 在 炎 狼 的 要 季 芹 时 饮用 以 防治 首 疾 。 


18-10 ”修饰 XML 文本 后 的 效果 


18.4 浏览 器 中 的 XML DOM 


目前 Intemet Explorer 和 Firefox 两 大 主流 浏览 器 都 提供 了 对 XML 相关 特性 的 支持 ， 使 得 
Web 开发 人 员 可 在 客户 端 使 用 JavaScript 进行 XML 数据 的 处 理 。 浏 览 器 支持 的 XML 特性 包 
括 XML DOM、XPath 和 XSLT， 但 Internet Explorer 和 Firefox 对 这 些 特 性 的 支持 方式 各 有 
不 同 。 


18.4.1 案例 一 一 IE 浏览 器 中 的 XML DOM 


在 为 下 添加 XML 支持 时 ， 微 软 在 JavaScript 之 外 另 个 方 案 : 基于 ActiveX 的 MSXML 
库 。MSXML 是 为 开发 人 员 提供 的 首 个 在 Windows 平台 上 公用 实现 DOM 的 ActiveX 控件 ， 
MSXML 可 以 用 在 Visual Basic、C++ 和 其 他 基于 Windows 的 开发 平台 上 。 

微软 在 JavaScript 中 引入 了 用 于 创建 ActiveX 对 象 的 ActiveXObject 类 。ActiveXObject 的 
构造 函数 只 有 一 个 参数 ， 即 要 进行 实例 化 的 ActiveX 对 象 的 字符 串 代 号 。 例 如 ，XML DOM 
对 象 的 第 一 个 版 本 为 MicrosoftXmlDom ， 使 用 var oxmlDom=new Activexobject("Micro 
soft.xmldom") 代 码 创 建 这 个 对 象 的 实例 。 这 个 新 创建 的 XML DOM 对 象 与 其 他 DOM 对 象 一 
样 ， 用 来 遍历 DOM 树 、 操 作 DOM 节点 。 

开发 人 员 首 次 使 用 该 XML 处 理 方 法 时 ， 经 常会 出 现 问题 ， 因 为 用 户 常 常 未 安装 


MSXML。 在 多 数 情 况 下 ， 开 发 人 员 必须 直接 从 微软 网 站 上 下 载 这 个 库 。 不 过 ， 从 IE 5.0 浏览 
器 开始 修复 了 这 个 漏洞 ， 它 直接 搭载 MSXML。 对 每 个 新 版 本 的 MSXML， 都 会 创建 出 不 同 
的 XML DOM 对 象 ， 而 它们 各 自 的 名 称 也 不 相同 。 

使 用 函数 判断 浏览 器 所 使 用 的 版 本 相当 有 用 。 使 用 函数 createDocumentO 可 使 用 户 创建 正 
确 的 MSXML DOM 文档 ， 其 具体 的 内 容 如 下 : 


function createDocument () 
{ 
Var aVersions = [ "MSXML2 .DOMDocument.5.0", 
"MSXML2 .DOMDocument .4.0", "MSXML2 .DOMDocument .3.0", 
"MSXML2 .DOMDocument", "Microsoft .XmlDom"]; 
for (var i = 0; i < aVersions.length; i++) 
{ 
try 
{ 
Var oxXmlDom = new ActiveXxObject (aVersions[i]); 
return oxmlDom; 
} 


catch (oError) 


// 不 做 任何 处 理 
} 
} 
throw new Error("MSXML is not installed."); 

该 函数 遍历 存放 MSXML DOM 文档 版 本 号 的 aVersions 数组 ， 从 MSXML2.DOMDocum 
ent.5.0 开始 尝试 创建 DOM 文档 。 如 果 成 功 创建 对 象 ， 则 返回 该 对 象 且 退出 
createDocument(); 反之 则 “try...catch” 语 句 将 捕获 抛 出 的 异常 并 继续 下 一 次 循环 ， 尝 试 下 一 
个 版 本 。 如 果 MSXML DOM 文档 创建 失败 ， 则 抛 出 异常 ， 说 明 MSXML 未 安装 。 由 于 该 函 
数 不 是 一 个 类 ， 所 以 用 法 与 其 他 函数 类 似 ， 都 将 返回 一 个 值 : var oXmlDom = 
createDocument();。 使 用 createDocumentO 函 数 将 确保 程序 使 用 最 新 的 DOM 文档 。 在 成 功 创 
建 了 XML 文档 后 可 以 载 入 XML 数据 。 


1. 在 下 浏览 器 中 载 入 XML 数据 


MSXML 支持 两 种 载 入 XML 数据 的 方法 : load0 和 loadXML()。Load0 方 法 从 Web 的 指 
定位 置 载 入 一 个 XML 文件 。 与 XMLHTTP 一 样 ，load() 方 法 可 以 以 同步 或 异步 两 种 模式 载 入 
数据 。 默 认 情 况 下 ，load0 方 法 采用 异步 模式 。 如 果 要 采用 同步 模式 ， 则 必须 将 MSXML 对 象 
的 async 属性 设置 为 false， 其 代码 为 oXmlDom.async = false;。 

当 采 用 异步 模式 时 ，MSXML 对 象 公开 了 readyState 属性 。 该 属性 和 XMLHttp 的 
readyState 属性 一 样 ， 包 含 五 种 状态 。 此 外 ，DOM 文档 支持 onreadystatechange 函数 监控 
readyState 属性 。 因 为 异步 模式 是 默认 选项 ， 因 此 将 async 属性 设置 为 tue 是 可 选 的 。 代 码 
如 下 : 

oxmlDom.async = true; 


oxmlDom.onreadystatechange = function () { 
if (oxXxmlDom.readyState == 4) { 


A 
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// 当 document 完全 载 入 后 ， 进 行 某 些 操作 

} 
ee 

上 述 代码 的 作用 是 把 虚构 的 、 名 为 student.xml 的 XML 文档 载 入 到 XML DOM 文档 中 。 
当 readyState 的 值 为 4 时 ， 说 明文 档 已 经 完全 载 入 ， 则 执行 站 语句 中 的 代码 。 

当 采 用 loadXML() 方 法 载 入 XML 数据 时 ， 该 方法 与 load0 方 法 的 主要 区 别 在 于 从 字符 串 
载 入 XML， 而 不 是 根据 指定 的 文件 名 载 入 XML。 该 字符 串 必须 包含 正确 格式 的 XML， 代 码 
如 下 : 


Var sxXml = "<root><person><name>rose</name></person></root>"; 
oxmlDom.1loadXML (sxml); 


上 述 代码 的 含义 是 : oXmlDom 文档 将 载 入 sXml 变量 中 包含 的 XML 数据 。loadXML( 方 
法 不 需要 像 load() 方 法 那样 检查 readyState 属性 ， 更 不 需要 设置 async 属性 ， 因 为 该 方法 并 不 
涉及 服务 器 请 求 。 

2. 在 下 浏览 器 中 遍历 XML DOM 文档 


XML DOM 文档 的 遍历 与 HTML DOM 的 遍历 非常 类 似 ， 因 为 其 都 是 节点 层次 结构 。 节 
点 树 的 最 顶部 是 documentElement 属性 ， 包 含 文档 的 根 元 素 。X 遍历 DOM 文档 并 获取 数据 是 
一 个 很 直观 的 过 程 ， 例 如 以 下 XML 文档 的 代码 : 


<?xml] version="1.0" encoding="GB2312"?> 
<booklist> 
<book ISBN="0471777781">rose</book> 
<book ISBN="0764579088">JavaScript 从 零 开始 学 </book> 
<bookISBN="0764557599">MYSQL5 .6 从 零 开 始 学 </book> 
</booklist> 
上 述 XMI 文档 包含 1 个 根 元 素 <booklist>= 和 3 个 <book> 子 元 素 。 如 果 要 获取 文档 中 第 一 
个 <book> 子 元 素 ， 只 需 简单 通过 访问 以 下 firstChild 属性 就 可 以 达到 目的 : 
Var oRoot = oXmlDom.documentElement; 
Var oFirstBook = oRoot.firstChild; 


将 documentElement 赋 给 变量 oRoot， 可 以 节省 程序 空间 和 输入 的 内 容 ， 尽 管 这 并 不 是 必 
需 的 。 使 用 firstChild 属性 可 以 引用 根 元 素 <books> 的 第 一 个 子 元 素 <book> 的 引用 ， 并 将 其 赋 
值 给 变量 oFirstBook。 

如 果 当 前 节点 是 book 元 素 ， 那 么 如 何 选择 另 一 个 book 元 素 呢 ? 因为 <book> 元 素 有 共同 
的 父 节 点 ， 所 以 它们 互 为 邻居 关系 。 通 过 nextSibling 和 previousSibling 属性 可 以 选择 当前 节 
点 的 临近 节点 。nextSibling 属性 指向 下 一 个 邻居 ， 而 previousSibling 属性 指向 前 一 个 邻居 ， 它 
们 的 代码 如 下 : 


Var oSecondBook = oFirstBook.nextSibling; 
OFirstBook2 = oSecondBook.previousSibling; 


上 述 代码 引用 第 二 个 <book> 元 素 ， 并 将 其 赋值 给 oSecondBook。 通 过 oSecondBook 邻居 
节点 对 变量 oFirstBook2 重新 赋值 ，oFirstBook2 的 值 不 变 。 如 果 节 点 没有 下 一 个 邻居 节点 ， 则 


nextSibling 为 null。 对 于 previousSibling 也 是 一 样 的， 如 果 当 前 节点 没有 前 一 个 邻居 节点 ， 那 
么 previousSibling 也 为 null。 


3. 在 下 浏览 器 中 获取 XML 数据 
要 获取 XML 数据 只 需 使 用 一 个 属性 ， 即 xml。 该 属性 将 对 当前 节点 的 XML 数据 进行 序 


列 化 。 序 列 化 是 将 对 象 转换 成 简单 的 可 存储 或 可 传输 格式 的 过 程 。xml 属性 将 XML 转换 成 字 
符 串 的 形式 ， 包 括 完整 的 标签 名 称 、 属 性 和 文本 。 例 如 以 下 代码 : 


Var sxml = ORoot .xml17 
alert (sxml); 


这 段 代码 从 文档 元 素 开 始 序列 化 XML 数据 ， 并 将 其 作为 参数 传递 给 alert0 方 法 。 下 列 代 
码 就 是 部 分 已 序列 化 的 XML: 


<booklist> 
<book ISBN="9986715166153">rose</book> 
</booklist> 


已 序列 化 的 数据 可 以 载 入 到 另 一 个 XML DOM 对 象 中 ， 发 送 给 服务 器 ， 或 者 传 给 另 一 个 
页 面 。 通 过 xml 属性 返回 的 已 序列 化 XML 数据 ， 取 决 于 当前 节点 。 如 果 在 documentElement 
节点 使 用 xml 属性 ， 那 么 将 返回 整个 文档 的 XML 数据 ; 如果 只 在 <book/> 元 素 上 使 用 它 ， 那 
么 将 返回 该 <book> 元 素 所 包含 的 XML 数据 。xml 属性 是 只 读 属性 。 如 果 希 望 往 文档 中 添加 元 
素 ， 那 么 必须 使 用 DOM 方法 来 实现 。 


4. 在 下 浏览 器 中 操作 DOM 


在 遍历 DOM、 从 DOM 中 提取 信息 、 将 XML 转换 成 字符 串 格式 后 ， 就 可 以 在 DOM 中 
进行 各 种 操作 ， 例 如 添加 、 删 除 和 蔡 换 节点 。 

(1) 创建 节点 。 

使 用 DOM 方法 可 以 创建 多 种 不 同 的 节点 。 例 如 使 用 createElement() 方 法 创建 元 素 : 向 该 
方法 传 入 一 个 参数 ， 指 明 要 创建 的 元 素 标签 名 称 ， 并 返回 一 个 对 XMLDOMElement 的 引用 。 
代码 如 下 : 


Var oNewBook = oXmlDom.createElement ("book"); 
oxmlDom.documentElement .appendChild (oNewbook); 


上 述 代码 创建 了 一 个 新 的 <book> 元 素 ， 并 通过 appendChild0 方 法 把 它 添加 到 了 
documentElement 中 。appendChild() 方 法 添加 由 其 参数 指定 的 新 元 素 ， 并 将 其 作为 最 后 一 个 子 
节点 。 如 果 添 加 一 个 空 的 <book> 元 素 ， 则 还 需要 为 该 元 素 添 加 一 些 文本 ， 其 具体 代码 如 下 : 


Var ONewBook = OoXmlDom.createElement ("book"); 


Var oNewBookText = oXmlDom.createTextNode ("Professional .NET 2.0 Generics"); 


ONewBook.appendChild (oNewBookText); 

oxmlDom.documentElement .appendChild (oNewbook); 

这 段 代 码 通过 createTextNode() 方 法 创建 了 一 个 文本 节点 ， 并 通过 appendChild0 方 法 把 它 
添加 到 新 创建 的 book 元 素 中 。createTextNode0 方 法 只 有 一 个 字符 串 参数 ， 用 来 指定 文本 节点 
的 值 。 现 在 已 经 通过 程序 创建 了 新 的 book 元 素 ， 为 其 提供 了 一 个 文本 节点 ， 并 将 它 添加 到 文 
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档 中 。 对 于 这 个 新 元 素 而 言 ， 还 需要 像 其 他 邻居 节点 一 样 ， 为 其 设置 isbn 属性 。 通 过 
setAttribute() 方 法 可 以 创建 isbn 属性 ， 该 方法 适用 于 所 有 元 素 节点 。 代 码 如 下 : 


Var ONewbook = oXmlDom.createElement ("book"); 

var oNewbookText = oXmlDom.createTextNode ("Professional -NET 2.0 Generics"); 

ONewbook .appendChild (oNewbookText); 

ONewbook.setAttribute ("isbn","9787115155375"); 

oxmlDom.documentElement .appendChild (oNewbook); 

上 述 代码 中 的 oNewbook.setAttribute("isbn","9787115155375"); 语 句 用 来 创建 isbn 属性 ， 
并 将 其 值 赋 为 9787115155375。setAttribute( 方 法 有 两 个 参数 : 第 一 个 参数 是 属性 名 ， 第 二 个 
参数 则 是 赋 给 该 属性 的 值 。 对 于 向 元 素 添加 属性 ，IE 浏览 器 还 提供 了 一 些 其 他 方法 ， 不 过 它 
们 实际 上 并 不 比 setAttribute0 好 用 ， 有 时 甚至 需要 更 多 的 编码 。 

(2) 删除 、 蔡 换 和 插入 节点 。 

removeChild0 方 法 用 来 删除 XML 文档 中 的 节点 。 该 方法 包含 一 个 参数 : 要 删除 的 节点 。 
例如 ， 从 文档 中 删除 第 一 个 <book> 元 素 的 代码 为 var oRemovedChild = oRoot.removeChild 
(oRootfirstChild): 。 

removeChild0 方 法 返回 被 删除 的 子 节点 ， 因 而 oRemoveChild 变量 将 指向 已 删除 的 <book> 
元 素 。 当 拥有 对 旧 节 点 的 引用 时 ， 可 将 其 放置 在 文档 的 任何 位 置 。 

如 果 想 用 oRemovedChild 指向 的 元 素来 蔡 换 第 三 个 <book> 元 素 ， 那 么 可 以 通过 
replaceChild() 方 法 来 实现 。 该 方法 返回 被 替换 的 节点 如 下 : 


Var oReplacedChild = oRoot.replaceChild (oRemovedChild, oRoot.childNodes[2]); 


replaceChild() 方 法 包含 有 两 个 参数 : 新 添加 的 节点 和 将 被 蔡 换 的 节点 。 在 这 段 代 码 中 ， 
用 oRemovedChild 变量 引用 的 节点 蔡 换 第 三 个 <book> 元 素 ， 而 被 蔡 换 节点 的 引用 将 存在 
oReplacedChild 变量 中 。 由 于 oReplaceChild 变量 是 被 蔡 换 节 点 的 引用 ， 因 而 可 以 容易 地 将 其 
插入 到 文档 中 。 使 用 appendChild0 方 法 可 以 将 其 添加 到 子 节点 列表 的 最 后 ， 使 用 insertBefore() 
方法 可 将 该 节点 插入 到 某 个 节点 之 前 。 

“oRootinsertBefore(oReplacedChild，oRootlastChild):” 代 码 段 将 之 前 被 蔡 换 的 节点 插入 
到 最 后 一 个 <book> 元 素 的 前 面 。lastChild 属性 的 用 法 与 firstChild 选择 第 一 个 子 节点 非常 相 
似 ， 通 过 该 属性 可 以 获取 最 后 一 个 子 节点 。insertBefore() 方 法 接受 两 个 参数 : 要 插入 的 节点 和 
表示 插入 点 的 节点 (插入 点 在 该 节点 之 前 )。DOM 是 一 个 相当 强大 的 接口 ， 通 过 它 可 以 实现 数 
据 的 获取 、 删 除 和 添加 等 操作 。 

5. 在 下 浏览 器 中 处 理 错误 

在 XML 数据 的 载 入 过 程 中 ， 有 时 会 抛 出 错误 ， 例 如 外 部 XML 文件 找 不 到 或 XML 的 格 
式 不 正确 。 为 处 理 这 些 情况 ，MSXML 提供 了 一 个 包含 错误 信息 的 parseError 对 象 。 对 于 每 个 
由 MSXML 创建 的 XML DOM 文档 对 象 ， 该 对 象 都 是 其 所 属 的 属性 值 之 一 。 

通过 parseError 对 象 公开 的 与 整数 0 进行 比较 的 errorCode 属性 可 以 检查 错误 。 如 果 
errorCode 不 等 于 0， 则 表示 有 错误 发 生 。 例 如 下 面 代码 中 故意 设计 出 现 的 错误 。 


Var sXml = "<root><person><book>Jeremy McPeak</book></root>"; 
Var oxXmlDom = createDocument (); 


oxmlDom.loadXML (sSXml) 


if (oOXmlDom.-parseError-errorcode != 0) { 

alert ("An Error Occurred: " + oxXmlDom.parseError.reason); 
} else { 

// 当 xML 载 入 成 功 后 的 操作 


. 

在 上 述 代码 中 ，<person> 元 素 是 不 完整 的 (没有 相应 的 </person> 标 签 )。 由 于 要 载 入 的 
XML 格式 不 正确 ， 因 此 将 产生 一 个 错误 。errorCode 与 0 进行 比较 ， 如 果 不 相等 则 将 显示 发 
生 错 误 的 警告 。 要 实现 该 功能 ， 可 使 用 parseError 对 象 的 reason 属性 获取 错误 出 现 的 原因 。 


18.4.2 ”案例 一 一 Firefox 浏览 器 中 的 XML DOM 


Firefox 浏览 器 中 的 XML 相关 功能 具备 跨 平 台 能 力 ， 可 以 在 各 种 操作 系统 平台 上 运行 ， 
而 微软 的 MSXML 库 只 能 在 Windows 平台 上 运行 。 


1. 创建 XML 文档 对 象 
在 Firefox 浏览 器 中 创建 XML 文档 对 象 的 语法 如 下 : 


document .implementation.createDocument (namespaceURI, rootname, doctype) 


其 中 namespaceURI 代表 XML 文档 的 命名 空间 URI; rootname 代表 根 节 点 名 称 ; doctype 
表示 创建 文档 的 类 型 。 目 前 Firefox 并 没有 实现 对 doctype 的 支持 ， 在 实际 使 用 时 doctype 赋 
值 为 null。 若 namespaceURI 和 rootname 为 空 字符 串 ， 则 createDocument 方法 将 创建 一 个 空 的 


DOM 对 象 ， 即 : var doc = document.implementation.createDocument("", "", null);。 
2. 加 载 XML 文档 


在 Firefox 浏览 器 中 使 用 load 方法 可 加 载 指定 URL 的 XML 文档 。DOM 对 象 同样 具有 
async 属性 ， 该 属性 的 默认 值 为 tue， 即 默认 情况 下 它 采 用 异步 加 载 模 式 。 如 果 需 要 采取 同步 
的 模式 加 载 XML 文档 ， 那 么 必须 将 DOM 对 象 的 async 属性 设置 为 false。 

Firefox 浏览 器 不 支持 正 浏览 器 中 的 onreadystatechange 事件 ， 因 此 不 存在 readyState 属性 
从 1 到 4 的 变化 过 程 。 当 文档 加 载 完 成 之 后 ，DOM 对 象 将 被 触发 load 事件 ， 通 常 在 load 事 
件 的 处 理 函数 中 进行 XML 文档 的 处 理 ， 以 下 给 出 了 相关 的 示例 代码 。 


Var doc = document.implementation.createDocument ("", "", null); 
doc.load ("books.xml"); 
doc.onload = function() 


// 加 载 xML 完成 

}; 

在 Firefox 浏览 器 中 可 以 通过 加 载 XML 字符 串 的 方式 加 载 XML 文档 。Firefox 浏览 器 不 
支持 正 浏览 器 中 的 loadXML 方法 ， 它 通过 DOMParser 对 象 加 载 XML 字符 串 生成 DOM 对 
象 。 以 下 是 在 Firefox 中 通过 字符 串 方式 加 载 XML 文档 的 示例 : 

// XML 字符 串 


var XmlString = "<Books> 
<Book><Title>Ajax In Action</Title><Author>JSP 实例 教程 </Author></Book> 
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<Book><Title>Professional Ajax</Title><Author>XML 与 JSP 基础 教程 
</Author></Book> 

</Books>"; 

// 创建 DoMParser 对 象 

Var parser = new DOMParser() 7 

// 解析 字符 串 ， 创 建 DoM 对象 


Var doc = parser.parseFromSstring (xmlString, "text/xml"); 
3. 访问 XML 节点 
Firefox 浏览 器 中 的 DOM 对 象 支持 所 有 标准 的 DOM 属性 和 方法 。 需 要 说 明 的 是 : text 和 


xml 两 个 属性 是 微软 对 DOM 标准 的 扩展 ，Firefox 浏览 器 不 支持 它们 ， 但 通过 其 他 方式 可 以 


实现 类 似 的 功能 。 下 面 的 代码 使 用 getText 方法 返回 节点 中 的 文本 内 容 ， 该 方法 通过 递归 方式 
饥 历 了 节点 的 所 有 叶子 节点 。 


// 删除 字符 串 两 端的 空白 字符 
String.prototype.trim = function() 
return this.replace(/^\s+|\s+$/gi, ""); 


} 
// 获取 XML 节点 中 文本 
function getText (node) 


{ ”// 保存 文本 内 容 的 字符 串 

Var s = ""; 

// 遍历 所 有 子 节点 

for (var i = 0;i < node.childNodes.length;i++) 
if (node.childNodes[i].hasChildNodes ()) 

{ // 如 果 该 子 节点 还 有 子 节 点 ， 递 归 调用 getText 方法 
s += getText (node .childNodes [i]); 

} 


else 
{  // 将 节点 值 加 入 XML 字符 串 ， 考 虑 到 Firefox 中 将 
// 所 有 空白 字符 串 均 作为 普通 节点 ， 这 里 删除 所 有 的 空白 文本 
s += node.childNodes[i] .nodeValue.trim(); 
} 
return s; 


) 
在 Firefox 浏览 器 中 空白 文本 节点 会 被 遍历 ， 这 里 需要 将 nodeValue( 节 点 值 ) 使 用 trim 函 


数 进行 处 理 。 在 Firefox 浏览 器 中 使 用 XMLSerializer 对 象 可 以 获取 节点 的 XML 字符 串 。 例 如 


下 
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的 getXml0 函 数 返回 节点 的 XML 字符 串 : 


function getXml (node) 
{ 
// 创建 XMLSerializer 对 象 
Var serializer = new XMLSerializer(); 
// 返回 节点 的 xML 字符 串 


return serializer.serializeToString (node); 


二 


4. 异常 处 理 
Firefox 浏览 器 对 于 XML 异常 处 理 的 方式 与 正 浏览 器 不 同 ， 当 异常 发 生 时 ， 它 会 通过 
DOM 对 象 加 载 一 个 包含 错误 信息 的 XML 文档 。 例 如 处 理 以 下 XML 文档 : 


<?xml Version="1.0"” encoding="UTF-8"?> 
<Books> 
<Book> 
<Title>Ajax In Action</Title> 
<Author>Dave Crane</Author> 
</Book> 
<Book> 
<Title>Professional Ajax</Title> 
<Ruthor>Nicholas C.Zakas</Author> 
</Book> 
</Books> 
此 时 加 载 books .xml， 将 返回 一 个 包含 错误 信息 的 xML DOM 对 象 ， 其 内 容 如 下 。 
<?xml Version="1.0"” encoding="UTF-8"?> 
<parsererror xmlns="http://www.Firefox.org/newlayout/xml/parsererror.xml"> 
XML 解析 错误 : 未 组 织 好 位 置 file:///E:/Javascript/1.xml 行 : 2， 列 : 3: 
<Books> 
<sourcetext> 
12&1t7Books&gt7 一 一 ^ 
</sourcetext> 
</parsererror> 


Firefox 浏览 器 在 处 理 上 述 XML 文档 时 ， 通 过 解析 包含 错误 信息 的 DOM 对 象 获取 错误 的 
原因 、 位 置 等 信息 。 


部 芍 WX 瑟 卫 ]duoSeAer 贡 8 汕 名 


GG 


18.5 浏览 器 中 的 XPath 


XPath 是 一 种 用 于 查询 XML 文档 中 某 些 特定 元 素 的 语言 ， 最 初 是 为 XSLT 提供 一 种 在 
XML 文档 中 查找 元 素 的 方法 ， 但 很 快 被 开发 人 员 用 来 在 XML 文档 中 实现 通用 的 节点 查询 。 


18.5.1 案例 一 一 IE 浏览 器 中 的 XPath 


在 正 浏 览 器 中 使 用 XPath 非常 简单 ， 直 接 使 用 select Nodes 或 者 select Single Node 方法 
就 能 实现 XPath 查询 。 例 如 以 下 XML 文档 (booklistxml): 


<?xml Version="1.0"” encoding="GB2312"?> 
<Booklist> 
<Book > 
<name>JavaSscript 使 用 技术 教程 </name> 
<author> 张 小 明 </author> 
</Book> 
<Book> 
<name>Javascript 应 用 教程 </name> 
<author> 王 常 华 </author> 
</Book> 
</Booklist> 
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通过 以 下 代码 可 以 查询 上 述 代 码 中 的 所 有 <Book> 节 点 : 


// XPath: "Booklist/Book"， 表 示 所 有 <Booklist> 节 点 下 的 <Book> 节 点 
Var nodesBook = doc.selectNodes ("Booklist/Book"); 

// 输出 <Book> 节 点 的 个 数 2 

alert (nodesBook.1length); 


在 很 多 情况 下 ， 只 需要 获取 第 一 个 满足 条 件 的 节点 即 可 ， 例 如 : 
// 第 1 个 <Book> 节 点 


var firstBook = doc.selectSingleNode ("Booklist/Book"); 
// 输出 节点 的 xML 内 容 
alert (firstBook.xml); 
// 输出 内 容 
<Book> 
<name> JavaScript 使 用 技术 教程 </name> 
<author> 张 小 明 </author> 
</Book> 


18.5.2 ”案例 一 一 Firefox 浏览 器 中 的 XPath 


与 下 浏览 器 中 的 XPath 相 比 ， 使 用 Firefox 浏览 器 中 的 XPath 要 复杂 得 多 ， 但 实现 的 功 
能 却 更 强大 。 在 Firefox 浏览 器 中 进行 XPath 查询 ， 首 先 需 要 了 解 XPathEvaluator 和 
XPathResult 这 两 个 关键 对 象 ， 它 们 的 作用 分 别 是 执行 XPath 查询 和 保存 查询 结果 。 

XPath Evaluator 使 用 evaluate0 方 法 进行 XPath 查询 ， 其 语法 格式 如 下 : 


evaluate (String expression,Node contextNode,XPathNSResolver resolVver Short 
type,nsISupports result) 


其 中 ， 各 参数 的 含义 如 下 。 

®@ expression: XPath 表达 式 。 

@ context Node: 上 下 文 节点 ，evaluate0 方 法 将 在 其 内 部 进行 查询 。 

@ “resolver: 命名 空间 解释 函数 ， 当 XPath 中 存在 命名 空间 时 ， 需 要 指定 该 参数 进行 命 
名 空间 的 解释 。 

@ type: 结果 类 型 ， 有 10 种 不 同 结果 类 型 ， 分 别 对 应 于 XPathResult 对 象 中 定义 的 10 
个 常数 。 

@ result:， 当 该 参数 是 一 个 存在 的 XPathResult 对 象 时 ， 用 于 保存 XPath 查询 的 结果 ; 
当 该 参数 是 null 时 ，evaluate() 方 法 将 新 建 一 个 XPathResult 对 象 用 来 保存 结果 。 

如 果 想 在 前 面 用 到 的 booklistxml 中 查询 所 有 的 <Book> 节 点 。 需 要 先 创建 一 个 Xpath 

Evaluator 对 象 ， 代 码 如 下 : 


Var xpe = new XPathEvaluator () 7 
再 调用 evaluate() 方 法 获取 元 素 的 迭代 器 : 
Var iterator = xpe.evaluate ("Booklist/Book", doc, null, XPathResult.ANY TYPE, null); 


最 后 遍历 所 有 的 <Book> 节 点 ， 输 出 其 XML 字符 串 : 


Var node; 


// 通过 迁 代 器 遍历 所 有 满足 条 件 的 节点 


G0 


while (node = iterator.iterateNext()) { 
// 输出 node 节点 的 XML 字符 串 
alert (getxm] (node)); 


在 上 述 代 码 中 在 调用 evaluate0 方 法 时 ， 使 用 的 type 参数 是 XPathResult.ANY_TYPE。 它 
代表 的 含义 是 ， 结 果 集 会 包含 XPath 查询 获得 的 任何 类 型 的 结果 。 如 果 只 需 获 取 第 一 个 元 
素 ， 即 模仿 正 浏览 器 中 selectSingleNode0 方 法 的 行为 ， 那 么 需 将 type 参数 设置 为 XPathResultFIRST OR. 
DERED_NODE_TYPE， 相 关 代码 如 下 : 


// 创建 XPathEvaluator 对 象 

Var xpe= new XPathEvaluator () 7 

// 查询 <Book> 节 点 

Var iterator = xpe.evaluate ("Booklist/Book", doc, 
null,XPathResult .FIRST ORDERED NODE TYPE, null); 
// 获取 查询 结果 

Var node = iterator.singleNodeValue; 

// 输出 节点 的 xML 字符 串 

alert (getXml (node)); 


18.6 ”浏览 器 中 的 XSLT 


XSLT 是 可 以 将 XML 文档 转换 为 其 他 文本 格式 (包括 普通 文本 、XML、HTML， 其 至 高 
级 语言 的 代码 等 ) 的 语言 。 目 前 最 常见 的 XSLT 应 用 是 将 XML 格式 的 数据 转换 为 HTML 页 面 
代码 ， 从 而 实现 数据 与 显示 的 分 离 。 


18.6.1 案例 一 一 IE 浏览 器 中 的 XSLT 


在 正 浏览 器 中 要 实现 XSLT 转换 仍然 需要 依靠 MSXML 库 中 的 ActiveX 控件 。 根 据 实际 
用 的 需要 ， 可 以 选择 不 同 的 方式 进行 XSLT 转换 。 有 具体 步骤 是 ， 先 创建 一 个 要 进行 XSLT 转 
换 的 XML 文档 (booklist.xml]))， 代 码 如 下 : 


<?xml Version="1.0"” encoding="UTF-8"?> 
<Booklist xmlns:sww="http://www.sww.com"> 
<Book> 
<Title>Ajax In Action</Title> 
<Author>Dave Crane</Author> 
</Book> 
<Book> 
<Title>Professional Ajax</Title> 
<Author>Nicholas C.Zakas</Author> 
</Book> 
</Booklist> 


然后 创建 一 个 XSL 样式 表 (Booklist.xsl]) 文 件 ， 代 码 如 下 : 


/** books.xsl **/ 

<?xml] version="1.0" encoding="UTF-8"?> 

<xsl:stylesheet version="L.0° 
xmlns:xsl="http://www.w3.o0rg/1999/XsL/Transform" 
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xmlns:fo="http://www.w3.0org/1999/XsL/Format"> 
<xsl:output method="html"/> 
<xsl:template match="/"> 
<xsl:for-each select="/Booklist/Book"> 
<ul> 
Ee 
<xsl:value-of select="Title"/> 
</1i> 
<1i> 
<xsl:value-of select="Author"/> 
</1i> 
</ul> 
</xsl:for-each> 
</xsl:template> 
</xsl:stylesheet> 


1. 基于 DOMDocument 的 XSLT 转换 


在 下 浏览 器 中 实现 XSLT 转换 的 最 简单 的 方式 是 通过 DOMDocument 对 象 的 
transformNode() 方 法 : 先 分 别 加 载 XML 文档 和 XSL 样式 表 ， 再 调用 DOMDocument 对 象 的 
transformNode() 方 法 ， 该 方法 的 输入 参数 是 与 XSL 样式 表 对 应 DOMDocument 对 象 。 

具体 的 实现 代码 如 下 : 


function testxsL() 
{ 
// 创建 DoMpocument 对 象 ， 并 且 加 载 XML 文档 
Var xmlDom = createDocument (); 
xmlDom.async = false; 
xmlDom.load ("booklist.xml"); 
// 创建 DoMpocument 对 象 ， 并 且 加 载 xsL 样式 表 
Var xslDom = createDocument () 
xslDom.async = false; 
xslDom.load ("booklist.xs1"); 
// 将 XsLT 转换 的 结果 输出 到 id 为 “out” 的 <div> 标 签 中 
$ ("out") .innerHTML = xmlDom.transformNode (xslDom); 
} 
function $ (element) 
if (typeof element == "string") 
Return document .getElementById (element) 
else return element; 


} 


2. 基于 XSLTemplate 的 XSLT 转换 


在 正 浏 览 器 中 使 用 XSLTemplate 对 象 也 可 以 进行 XSLT 转换 。 具 体操 作 步 又 如 下 : 

创建 DOM 对 象 并 加 载 XML 文档 。 

EC 创建 DOM 对 象 并 加 载 XSL 样式 表 。 为 了 在 XSLTemplate 对 象 中 使 用 样式 表 ， 
必须 创建 线程 安全 的 DOM 对 象 ， 它 对 应 于 MSXML 库 中 的 另 一 个 ActiveX 控件 。 

EC) 创建 XSLTemplate 对 象 ， 并 将 其 stylesheet 属性 设置 为 XSL 样式 表 的 DOM 
对 象 。 


通过 XSLTemplate 对 象 创建 XSLProcessor 对 象 ， 并 将 其 input 属性 设置 为 XML 
文档 的 DOM 对 象 。 

调用 XSLProcessor 对 象 的 transform() 方 法 执行 XSLT 转换 。 

使 用 XSLTemplate 对 象 进行 XSLT 转换 的 实现 代码 如 下 : 


// 创建 线程 安全 的 DoM 对 象 
function createFreeThreadedDocument () 
{ 
return Try.thesel( 
function () 


沿革 1NX 器 匡 duoSeAer_ 贡 8 溃 间 


return new ActiveXObject ("Msxml2.FreeThreadedDOMDocument .6.0"); 


}, 
function () 


return new ActiveXObject ("Msxml2.FreeThreadedDOMDocument .5.0"); 
}, 


function () 


return new ActiveXObject ("Msxml2.FreeThreadedDOMDocument .4.0"); 
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}, 
function () 
{ 
return new ActiveXObject ("Msxml2.FreeThreadedDOMDocument .3.0"); 
] 
function () 


{ 


return new ActiveXObject ("Msxml2.FreeThreadedDOMDocument"); 


1 
) 11 false; 


// 创建 XSLTemplate 对 象 
function createxsLTemplate() 
{ 
return Try.thesel( 
function () {return new ActivexObject ("Msxml2.XSLTemplate.6.0");}, 
function () {return new ActiveXObject ("Msxml2.XSLTemplate.5.0");}, 
function () {return new ActivexObject ("Msxml2.XSLTemplate.4.0");}, 
function () {return new ActiveXObject ("Msxml2.XSLTemplate.3.0");}, 
function () {return new ActiveXObject ("Msxml2.XSLTemplate");} 
) 11 false; 


上 

// 创建 DoM 对象， 并且 加 载 XML 文档 

Var xmlDom = createDocument (); 

xmlDom.async = false; 

xmlDom.load ("booklist.xm]l"); 

// 创建 DoM 对象， 并 且 加 载 xsL 样式 表 

Var xslDom = createFreeThreadedDocument (); 
xslDom.async = false; 

xslDom.load ("booklist.xs1"); 

// XSLTemplate 对 象 ， 用 于 缓存 样式 表 和 创建 XslProcessor 对 象 
Var xslTemplate = createxsLTemplate(); 
xslTemplate.stylesheet = xslDom; 

// 创建 XslProcessor 对 象 

Var xslProcessor = xslTemplate.createProcessor(); 
XslProcessor.input = xmlDom; 
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// 将 XsLT 转换 的 结果 输出 到 id 为 “out ”的 <aiv> 中 
xslProcessor.transform(); 
$ ("out") .innerHTML = xslProcessor.output; 


使 用 XSLTemplate 可 以 缓存 XSL 样式 表 ， 当 多 次 使 用 该 样式 表 时 可 以 提高 XSLT 转换 的 
效率 。 此 外 ，XSLTemplate 还 可 以 为 XSLT 转换 增加 一 些 动 态 的 特性 ， 例 如 向 XSL 样式 表 中 
传 入 参数 或 JavaScript 对 象 等 。 使 用 XslProcessor 对 象 的 addParameter() 方 法 可 以 向 XSL 表 中 
传 入 参数 。 其 方法 是 ， 在 XSL 样式 表 中 定义 参数 名 称 ， 并 且 在 需要 的 位 置 使 用 该 参数 。 

修改 后 的 XSL 样式 表 代 码 如 下 : 


<?xml version="1.0" encoding="UTF-8"?> 
<xsl:stylesheet Version="1.0" 
xmlns:xsl="http://www.w3.0rg/1999/XsL/Transform" 
xmlns:fo="http://www.w3.0org/1999/XSsL/Format"> 
<xsl:output method="html"/> 
<xsl:param name="title"/> 
<xsl:template match="/"> 
<xsl:for-each select="/Booklist/Book"> 
<h1> 
<xsl:value-of select="$title"/> 
</h1> 
<ul> 
<1li> 
<xsl:value-of select="Title"/> 
</1i> 
<1li> 
<xsl:value-of select="Author"/> 
</1i> 
</ul> 
</xsl:for-each> 
</xsl:template> 
</xsl:stylesheet> 


上 述 XSL 样式 表 代 码 带 有 一 个 title 参数 ， 通 过 XslProcessor 对 象 可 设置 该 参数 的 值 ， 例 
如 : xslProc essor.addParameter("title", "Ajax Books");。 使 用 XslProcessor 对 象 的 addObject() 方 
法 可 以 向 XSL 样式 表 中 传递 JavaScript 对 象 ， 传 入 的 对 象 会 影响 XSLT 转换 结果 ， 在 XSLT 
转换 过 程 中 还 可 执行 该 对 象 内 部 的 方法 。 其 方法 是 : 先 定义 准备 传 入 的 JavaScript 对 象 ， 其 中 
包含 一 个 属性 和 一 个 方法 。 代 码 如 下 : 
Var obj = { 
prop: "Ajax Books", 
func: function () 
{ 


alert ("Hello!"); 
Teturn 


] 
通过 XslProcessor 对 象 的 addObject0 方 法 传 入 obj 对 象 ， 指 定 该 对 象 对 应 的 命名 空间 。 


XS1LProcessor .addobject (obj, "http://www.testobj.com"); 


修改 后 的 XSL 样式 表 代码 如 下 : 
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<?xml Version="1.0"” encoding="UTF-8"?> 
<xsl:stylesheet Version="1.0" 
xmlns:xsl="http://www.w3.o0rg/1999/XsL/Transform" 
xmlns:fo="http://www.w3.o0rg/1999/XSsL/Format" 
xmlns:bookObj="http://www.testobj.com"> 
<xsl:output method="html"/> 
<xsl:template match="/"> 
<xsl:for-each select="/Books/Book"> 
<xsl:value-of select="bookObj:func()"/> 
<hl> 
<xsl:value-of select="bookObj:get-prop()"/> 
</h1> 
<ul> 
<1i> 
<xsl:value-of select="Title"/> 
</1i> 
<1i> 
<xsl:value-of select="Author"/> 
</1i> 
</ul> 
</xsl:for-each> 
</xsl:template> 
</xsl:stylesheet> 


XSLT 转换 的 最 终结 果 是 输出 obj 对 象 的 prop 属性 ， 并 且 在 转换 过 程 中 执行 func0 方 法 。 
基于 XSLTemplate 的 XSLT 转换 可 使 XSLT 转换 获得 更 多 的 动态 特性 ， 从 而 加 强 对 XSLT 转 
换 过 程 的 控制 。 但 从 另 一 个 角度 来 看 ， 这 种 方式 增加 了 JavaScript 与 XSL 样式 表 之 间 的 关联 
性 ， 需 谨慎 使 用 ， 否 则 会 增加 日 后 维护 以 及 修改 代码 的 难度 。 


18.6. 2 ”案例 一 一 Firefox 浏览 器 中 的 XSLT 


在 Firefox 浏览 器 中 进行 XSLT 转换 需要 用 到 XSLTProcessor 对 象 ， 它 类 似 于 正 浏览 器 
中 的 XslProcessor 对 象 。 使 用 它 进行 XSLT 转换 的 基本 步骤 如 下 : 

分 别 创建 DOM 对 象 并 加 载 XML 文档 和 XSL 样式 表 。 

创建 XSLTProcessor 对 象 ， 调 用 其 importStylesheet() 方 法 引入 XSL 样式 表 。 

调用 XSLTProcessor 对 象 的 transformToDocument(0) 或 者 transformToFragment() 方 
法 执行 样式 转换 。 前 者 以 XML DOM 对 象 为 参数 ， 并 把 结果 作为 一 个 新 的 XML 
DOM 对 象 返回 ， 后 者 返回 的 是 XML Fragment， 当 需要 把 结果 添加 到 已 经 存在 的 
DOM 中 时 使 用 该 方法 ， 所 以 该 函数 的 参数 为 要 转换 的 XML DOM 对 象 和 要 把 结果 
添加 进去 的 目标 DOM 对 象 。 

使 用 transformToDocument() 方 法 的 示例 代码 如 下 : 


xmlDoc.load ("example.xml"); 
xslDoc.load("mystyle.xslt"); 

Var oProcessor = new XSLTProcessor () 
// 导 入 XsLT DOM 
oProcessor.importStylesheet (xslDoc); 


// 实 现 转 换 ， 返 回 新 的 XML DOM 对 象 
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Var oResultDom = oProcessor.transformToDocument (xmlDoc); 
alert (oResultDom.xml); 

使 用 transformToFragment () 方 法 ， 示 例如 下 : 

xmlDoc.load ("employees .xm]l"); 

xslDoc.load ("employees.xslt"); 

Var oProcessor = new XSLTProcessor() 

// 导 入 

OProcessor .importStylesheet (xslDoc); 

// 实 现 转换 ， 并 添加 到 目标 DoM 中 

Var oResultFragment = oProcessor.transformToDocument (xmlDoc, document); 
// 添 加 节点 

var divNode = document.getElementById("divResult") 7 
divNode.appendChild(oResultFragment); 


18.7” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: XML 语法 基础 的 应 用 

练习 2: CSS 修饰 XML 文件 的 方法 。 
练习 3: 浏览 器 中 XML DOM 的 应 用 。 
练习 4: 浏览 器 中 XPath 的 应 用 。 

练习 5: 浏览 器 中 XSLT 的 应 用 。 


18.8 高 手 甜 点 


甜点 1: 如 何 使 用 XSLTemplate 对 象 进行 XSLT 转换 ? 


创建 DOM 对 象 并 且 加 载 XML 文档 ; 创建 DOM 对 象 并 加 载 XSL 样式 表 。 为 了 在 
XSLTemplate 对 象 中 使 用 样式 表 ， 必 须 创建 线程 安全 的 DOM 对 象 ， 它 对 应 于 MSXML 库 中 
的 另 一 个 ActiveX 控件 。 创 建 XSLTemplate 对 象 并 将 其 stylesheet 属性 设置 为 XSL 样式 表 的 
DOM 对 象 。 通 过 XSLTemplate 对 象 创建 XSLProcessor 对 象 并 将 其 input 属性 设置 为 XML 文 
档 的 DOM 对 象 。 调 用 XSLProcessor 对 象 的 transform( 方 法 执行 XSLT 转换 。 


甜点 2: XML 和 HTML 文件 有 什么 相同 和 不 同 ? 


HTML 和 XML 都 是 从 SGML 发 展 而 来 的 标记 语言 ， 因 此 ， 它 们 有 一 些 共 同 点 ， 例 如 相 
似 的 语法 和 标记 。 不 过 HTML 是 在 SGML 定义 下 的 一 个 描述 性 语言 ， 只 是 一 个 SGML 的 应 
用 。 而 XML 是 SGML 的 一 个 简化 版 本 ， 是 SGML 的 一 个 子 集 。 

XML 是 用 来 存放 数据 的 ，XML 不 是 HTML 的 替代 品 。XML 和 HTML 是 两 种 不 同 用 途 
的 语言 。XML 被 用 来 描述 数据 。HTML 只 是 一 个 显示 数据 的 标记 语言 。 
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19.1 Ajax 概述 


Ajax 是 一 项 很 有 生命 力 的 技术 ， 它 的 出 现 引 发 了 Web 应 用 的 革命 。 目 前 ， 在 网 络 站 点 ， 
使 用 Ajax 技术 还 非常 有 限 ， 但 是 ， 可 以 预见 在 不 久 的 将 来 ，Ajax 技术 会 成 为 整个 网 络 技术 的 
主流 。 


19.1.1 什么 是 Ajax 


Ajax 全 称 为 Asynchronous JavaScript And XML， 是 一 种 Web 应 用 程序 客户 机 技术 。 它 结 
合 了 JavaScript、 层 登 样式 表 、HTML、XMLHttpRequest 对 象 和 文档 对 象 模型 等 多 种 技术 。 运 
行 在 浏览 器 上 的 Ajax 应 用 程序 ， 以 一 种 异步 的 方式 与 Web 服务 器 通信 ， 并 且 只 更 新 页 面 的 
一 部 分 。 通 过 利用 Ajax 技术 ， 可 以 为 用 户 提供 丰富 的 、 基 于 浏览 器 的 体验 。 

AJAX 可 让 开发 者 在 浏览 器 端 更 新 被 显示 的 HTML 内 容 ， 而 不 必 通 过 刷新 页 面 更 新 。 换 
名 话说 ，AJAX 可 以 使 基于 浏览 器 的 应 用 程序 更 具 交 互 性 ， 而 且 更 类 似 传统 型 桌面 应 用 程 
序 。Google 的 Gmail 和 Outlook Express 就 是 两 个 典型 的 使 用 AJAX 技术 的 例子 。 而 且 ， 
AJAX 可 以 在 任何 客户 端 脚本 语言 中 使 用 。 

【 例 19.1】 (实例 文件 ，ch19\HelloAjax.jsp) 实 现 客户 端 与 服务 器 异步 通信 ， 在 不 刷新 页 
面 的 情况 下 将 获取 的 “你 好 ，Ajax” 数 据 显示 到 页 面 上 。 

具体 实现 步骤 如 下 。 

ED 使 用 记事 本 创建 HelloAjax.jsp 文件 。 代 码 如 下 : 


<%@ page language="java" pageEncoding="gb2312"%> 
<html> 
<head> 
<title> 第 一 个 Ajax 实例 </title> 
<style type="text/css"> 
<!-- 
body { 
background-image: url (images/img.jpg) 
} 
--> 
</style> 
</head> 
<script type="text/javascript"> 
...// 省 略 了 script 代码 
</script> 
<body><br> 
<center> 
<button onclick="hello()">Ajax</button> 
<P id="p"> 
单 击 按钮 后 你 会 有 惊奇 的 发 现 哟 ! 
</P> 
</center> 
</body> 
</html> 


JavaScript 代码 嵌入 在 <script> 与 </scrip 亿 标签 之 间 。 本 步骤 中 定义 了 一 个 函数 hello0， 该 
函数 通过 一 个 按钮 来 驱动 。 
在 step 01 省 略 的 代码 部 分 创建 XML Http Request 对 象 ， 创 建 完成 后 把 此 对 象 赋 
值 给 xml Http 变量 。 为 了 获得 多 种 浏览 器 支持 ， 应 使 用 create XML Http RequestO 函 
数 试 着 为 多 种 浏览 器 创建 Xml Http Request 对 象 。 代 码 如 下 : 


var xmlHttp=false; 
function createXMLHttpRequest() 


if (window.RctiveXObject) // 在 IE 浏览 器 中 创建 XMLHttpRequest 对 象 
{ 
try{ 
xmlHttp=new ActiveXObject ("Msxml2 .XMLHTTP") 7 
} 
catch(e){ 
tryl{ 


xmlHttp = new ActiveXObject ("Microsoft .XMLHTTP"); 


catch (ee) { 
xmlHttp=false; 


} 
} 


} 
else if (window.XMLHttpRequest)  // 在 非 IE 浏览 器 中 创建 XMLHttpRequest 对 象 


{ 
try{ 
xmlHttp = new XMLHttpRequest (); 
} 


catch(e){ 
xmlHttp=false; 
} 


} 
} 


在 step 01 省 略 的 代码 部 分 定义 hello0 函 数 。 该 函数 为 要 与 之 通信 的 服务 器 资源 创建 一 个 
URL。xmlHttp.onreadystatechange=callback: 与 xmlHttp.open("post","HelloAjaxDo;jsp",true):, 
第 一 行 定义 了 JavaScript 回调 函数 ， 一 旦 响应 它 就 自动 执行 ， 而 第 二 个 函数 中 所 指定 
的 true 标志 说 明 想 要 异步 执行 该 请 求 。 如 果 没 有 指定 则 默认 情况 下 为 true。 代 码 
如 下 > 


function hello() 
{ 
createXMLHttpRequest (); ”// 调 用 创建 XMLHttpRequest 对 象 的 方法 
xmlHttp.onreadystatechange=callback;  // 设 置 回调 函数 
xmlHttp.open ("post","HelloAjaxDo.jsp",true); // 向 服务 器 端 
HelloAjaxDo .jsp 发 送 请 求 
xmlHttp.setRequestHeader ("Content-Type", "application/x-www-form-— 
urlencoded; charset=gb2312"); 
xmlHttp.send (null); 
function callback() 
[1 
if (xmlHttp .readyState==4) 
省 
if(xmlHttp.status==200) 
{ 
Var data= xmlHttp.responseText; 
Var pNode=document .getElementById("p"); 
PNode .innerHTML=data; 
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} 
} 
:| 雹 数 callback() 是 回调 函数 ， 它 首先 检查 的 是 XMLHttpRequest 对 象 的 整体 状 
外 态 以 保证 它 已 经 完成 (eadyStatus==4)， 然 后 根据 服务 器 的 设 定 询问 请 求 状态 。 如 


果 一 切 正常 (status==200)， 就 使 用 var data=xmlHttp.responseText; 取 得 返回 的 数 
据 ， 用 innerHTML 属性 重 写 DOM 的 pNode 节点 的 内 容 。 


JavaScript 的 变量 类 型 使 用 的 是 弱 类 型 ， 都 使 用 var 来 声明 。document 对 象 就 是 文档 对 应 
的 DOM 树 。 通 过 document.getElementById("p"); 可 以 同一 个 标签 的 id 值 取得 此 标签 的 一 个 引 
用 ( 树 的 节点 ); PNode.innerHTML=str: 为 节点 添加 内 容 ， 会 覆盖 节点 的 原 有 内 容 ， 如 果 不 想 履 
盖 可 以 使 用 PNode.innerHTML+=str: 来 追加 内 容 。 

EEC 通过 step 03 可 知 要 异步 请 求 的 是 HelloAjaxDo.jsp。 下 面 需要 创建 该 文件 ， 代 码 

如 下 : 
<%@ page language="java" pageEncoding="gb2312"%> 
a Ajax"); 


%> 

ECXD 将 上 述 文件 保存 在 Ajax 站 点 下 ， 启 动 Tomcat 服务 器 打开 浏览 器 ， 在 地 址 栏 输 
入 “http://localhost:8080/Ajax/HelloAjaxjsp”， 单 击 【 转 到 】 按 钮 ， 效 果 如 图 19-1 所 示 。 

EEC) 单 击 Ajax 按钮 ， 发 现 变 化 效果 如 图 19-2 所 示 。 注 意 按 钮 下 方 的 内 容 的 变化 ， 在 
变化 的 过 程 中 没有 看 到 刷新 页 面 。 


[vsers Wdrinist D - © x js [人 司 HAuserswdminis -CX 
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图 19-1 会 变 的 页 面 显示 效果 图 19-2 动态 改变 页 面 的 效果 


19.1.2 Ajax 的 关键 元 素 


Ajax 不 是 单一 的 技术 ， 而 是 4 种 技术 的 集合 ， 要 灵活 地 运用 Ajax 必须 深入 了 解 这 些 不 同 
的 技术 ， 如 表 19-1 所 示 是 这 些 技术 与 它们 在 Ajax 中 所 扮演 的 角色 说 明 。 


表 19-1 Ajax 涉及 的 技术 


名 称 说 明 
JavaScript 是 通用 的 脚本 语言 ， 用 来 嵌入 在 某 种 应 用 之 中 。Web 浏览 器 中 
JavaScript 嵌入 的 JavaScript 解释 器 允许 通过 程序 与 浏览 器 的 很 多 内 建功 能 进行 交 


互 。Ajax 应 用 程序 是 使 用 JavaScript 编写 的 

CSS 为 Web 页 面 元 素 提供 了 一 种 可 重用 的 可 视 化 样式 的 定义 方法 。 它 提供 
Css 了 简单 而 又 强大 的 方法 ， 以 一 致 的 方式 定义 和 使 用 可 视 化 样式 。 在 Ajax 应 
用 中 ， 用 户 界面 的 样式 可 以 通过 CSS 独立 修改 

DOM 以 一 组 可 以 使 用 JavaScript 操作 的 可 编程 对 象 展现 出 Web 页 面 的 结 
DOM 构 。 通 过 使 用 脚本 修改 DOM，Ajax 应 用 程序 可 以 在 运行 时 改变 用 户 界 
面 ， 或 者 高 效 地 重 绘 页 面 中 的 某 个 部 分 

XMLHttpRequest 对 象 允许 Web 程序 员 以 后 台 活动 的 方式 从 Web 服务 器 获 
XMLHttpRequest 对 象 ”| 取 数据 。 数 据 格式 通常 是 XML， 但 是 也 可 以 很 好 地 支持 任何 基于 文本 的 数 
据 格式 


在 Ajax 的 4 种 技术 当中 ，CSS、Dom 和 JavaScript 都 是 很 早 就 出 现 了 技术 ， 它 们 以 前 结 
合 在 一 起 被 称 为 动态 HTML， 即 DHTML。 

Ajax 的 核心 是 JavaScript 的 对 象 XmlHttpRequest。 该 对 象 在 正 5.0 浏览 器 中 首次 引入 ， 
它 是 一 种 支持 异步 请 求 的 技术 。 简 而 言 之 ， 通 过 XmlHttpRequest 用 户 可 以 使 用 JavaScript 向 
服务 器 提出 请 求 并 处 理 响 应 ， 而 不 阻塞。 


19.1.3 CSS 在 Ajax 应 用 中 的 地 位 


CSS 在 Ajax 中 主要 用 于 美化 网 页 ， 是 Ajax 的 美术 师 。 无 论 Ajax 的 核心 技术 采用 什么 形 
式 ， 任 何 时 候 显示 在 用 户 面前 的 都 是 一 个 页 面 ， 是 页 面 就 需要 美化 ， 就 需要 CSS 对 显示 在 用 
户 浏览 器 上 的 界面 进行 美化 。 

如 果 用 户 在 浏览 器 中 查看 页 面 的 源 代码 ， 就 会 看 到 众多 的 <div> 块 以 及 CSS 属性 占据 了 源 
代码 的 很 多 部 分 ， 如 图 19-3 所 示 。 从 中 可 以 看 出 CSS 在 页 面 美 化 方面 的 重要 性 。 


局 hepy/wrnwel14lacom/?114Ia -硬汉 洒 


23 Qink rel="stylesheet” 1d="js_skinStyle” href="public/hone_new/css/skin/blue css” /> 
2 
Ceeript type="text/javascript”> 
4 处 理 cookie ( 筷 括 席 屏 ,旧版 , 皮 鞭 )**/ 
29 (funetionO{ 
30 
31 if (Cookie. get( layout' )) { 
32 


39 。 window_ location href = “kp htal’ 


35) } ls 
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19.2 Ajax 快速 入 门 


Ajax 作为 一 个 新 技术 ， 结 合 了 4 种 不 同 的 技术 ， 实 现 了 客户 端 与 服务 器 端的 异步 通信 ， 
并 且 对 页 面 实现 局 部 更 新 ， 大 大 提高 了 浏览 器 的 运行 速度 。 


19.2.1 全 面 剖 析 XML Http Request 对 象 


XMLHttpRequest 对 象 是 当今 所 有 Ajax 和 Web 2.0 应 用 程序 的 技术 基础 。 目 前 软件 经 销 
商 和 开源 社团 都 在 提供 各 种 Ajax 框架 ， 以 便 进一步 简化 XMLHttpRequest 对 象 的 使 用 。 


1，XML Http Request 概述 


Ajax 利用 一 个 构建 到 所 有 现代 浏览 器 内 部 的 对 象 XMLHttpRequest 实现 发 送 和 接收 HITP 
请 求 与 响应 信息 。 一 个 经 由 XMLHttpRequest 对 象 发 送 的 HTTP 请 求 并 不 要 求 页 面 中 拥有 或 回 
寄 一 个 <form> 元 素 。 

微软 在 正 5.0 浏览 器 中 以 一 个 ActiveX 对 象 的 形式 引入 了 XMLHttpRequest 对 象 。 其 他 在 
浏览 器 制造 商 认 识 到 这 一 对 象 的 重要 性 后 也 都 纷纷 在 他 们 的 浏览 器 内 引入 了 XMLHttpRequest 
对 象 ， 但 是 以 一 个 本 地 JavaScript 对 象 而 不 是 以 一 个 ActiveX 对 象 引 入 的 。 

如 今 ， 在 认识 到 实现 这 一 类 型 的 价值 及 安全 性 特征 之 后 ， 微 软 已 经 在 其 下 7.0 浏览 器 中 
将 XMLHttpRequest 实现 为 一 个 窗口 对 象 属性 。 幸 运 的 是 ， 尽 管 其 实现 细节 不 同 ， 但 是 ， 所 有 
的 浏览 器 都 实现 了 类 似 的 功能 。 目 前 ，W3C 组 织 正 在 努力 对 XMLHttpRequest 对 象 标准 化 。 


2. XMLHttpRequest 对 象 的 属性 和 事件 


XMLHttpRequest 对 象 暴露 了 各 种 属性 、 方 法 和 事件 ， 以 便 脚本 处 理 和 控制 HTTP 请 求 与 
响应 。 详 细 内 容 如 下 。 

(1) readyState 属性 。 

当 XMLHttpRequest 对 象 把 一 个 HTTP 请 求 发 送 给 服务 器 时 ， 它 将 经 历 若干 种 状态 ， 直 到 
请 求 被 处 理 ， 紧 接着 它 才 接收 一 个 响应 。 最 后 ， 脚 本 才 正 确 响应 各 种 状态 。XMLHttpRequest 
对 象 暴露 当前 描述 对 象 状态 的 是 readyState 属性 ， 如 表 19-2 所 示 。 


表 19-2 XMLHttpRequest 对 象 的 ReadyState 属性 值 


ReadyState 取 值 描述 
并 表示 描述 一 种 “未 初始 化 ”状态 ， 此 时 ， 已 经 创建 一 个 XMLHttpRequest 对 象 ， 
但 是 还 没有 初始 化 
表示 open() 方 法 并 且 XMLHttpRequest 已 经 准备 好 把 一 个 请 求 发 送 到 服务 器 


表示 描述 一 种 “发 送 ”状态 : 此 时 ， 已 经 通过 send0 方 法 把 一 个 请 求 发 送 到 服务 
器 端 ， 但 是 还 没有 收 到 一 个 响应 

表示 描述 一 种 “正在 接收 ”状态 ， 此 时 ， 已 经 接收 到 HTTP 响应 头 部 信息 ， 但 是 
消息 体 部 分 还 没有 完全 接收 结束 

4 表示 描述 一 种 “已 加 载 ”状态 ， 此 时 ， 响 应 已 经 被 完全 接收 
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(2) onreadystatechange 事件 。 

无 论 readyState 值 何 时 发 生 改变 ，XMLHttpRequest 对 象 都 会 激发 一 个 readystatechange 事 
件 。 其 中 ，onreadystatechange 属性 用 于 接收 一 个 EventListener 的 值 ， 该 值 向 该 方法 指示 无 论 
readyState 值 何 时 发 生 改 变 ， 该 对 象 都 将 被 激活 。 

(3) responseText 属性 。 

这 个 responseText 属性 包含 客户 端 接收 到 的 HTTP 响应 的 文本 内 容 。 当 readyState 值 为 
0、1 或 2 时 ，responseText 包含 一 个 空 字符 串 。 当 readyState 值 为 3( 正 在 接收 ) 时 ， 表 示 响 应 
中 包含 客户 端 还 未 完成 的 响应 信息 。 当 readyState 为 4( 已 加 载 ) 时 ， 表 示 该 responseText 包含 
完整 的 响应 信息 。 

(4) responseXML 属性 。 

当 接收 到 完整 的 HTTP 响应 时 responseXML 属性 用 于 描述 XML 响应 ;此 时 ，Content- 
Type 头 部 指定 MIME( 媒 体 ) 类 型 为 text/xml，application/xml 或 以 +xml 结尾 。 如 果 Content- 
Type 头 部 并 不 包含 这 些 媒体 类 型 之 一 ， 那 么 responseXML 的 值 将 为 null。 无 论 何 时 ， 只 要 
readyState 的 值 不 为 4， 那么 该 responseXML 的 值 都 将 为 null。 

其 实 ， 这 个 responseXML 属性 值 是 一 个 文档 接口 类 型 的 对 象 ， 用 来 描述 被 分 析 的 文档 。 
如 果 文 档 不 能 被 分 析 ( 例 如 ， 如 果 文 档 不 是 良 构 的 或 不 支持 文档 相应 的 字符 编码 )， 那 么 
responseXML 的 值 将 为 null。 

(5) status 属性 。 

status 属性 用 于 描述 HTTP 状态 代码 ， 其 类 型 为 short。 而 且 ， 仅 当 readyState 的 值 为 3( 正 
在 接收 中 ) 或 4( 已 加 载 ) 时 ， 这 个 status 属性 才 可 用 。 当 readyState 的 值 小 于 3 时 ， 如 果 试 图 存 
取 status 的 值 将 引发 一 个 异常 。 

(6) statusText 属性 。 

statusText 属性 用 于 描述 HTTP 状态 代码 文本 ， 并 且 仅 当 readyState 的 值 为 3 或 4 时 才 可 
用 。 当 readyState 的 值 为 其 他 值 时 ， 如 果 试 图 存 取 statusText 属性 将 引发 一 个 异常 。 

3. 创建 XMLHttpRequest 对 象 的 方法 

XMLHttpRequest 对 象 提供 了 各 种 方法 用 于 初始 化 和 处 理 HITP 请 求 ， 下 面 进行 详细 
介绍 。 

(1) abort() 方 法 。 

用 户 使 用 abort(0) 方 法 可 以 暂停 与 一 个 XMLHttpRequest 对 象 相 联 系 的 HITP 请 求 ， 从 而 把 
该 对 象 复位 到 未 初始 化 状态 。 

(2) open() 方 法 。 

用 户 调 用 open0 方 法 可 初始 化 一 个 XMLHttpRequest 对 象 。 其 中 ，method 参数 是 必须 提 
供 的 ， 用 于 指定 用 户 想 用 来 发 送 请 求 的 HTTP 方法 。 为 了 把 数据 发 送 到 服务 器 ， 应 该 使 用 
POST 方法 ; 为 了 从 服务 器 端 检 索 数 据 ， 应 该 使 用 GET 方法 。 

(3) send0 方 法 。 

在 通过 调用 open( 方 法 准备 好 一 个 请 求 之 后 ， 用 户 需 要 把 该 请 求 发 送 到 服务 器 。 仅 当 
readyState 的 值 为 1 时 ， 用 户 才 可 以 调用 send() 方 法 ;反之 ，XMLHttpRequest 对 象 将 引发 一 个 
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(4) setRequestHeader() 方 法 。 

setRequestHeader() 方 法 用 来 设置 请 求 的 头 部 信息 。 当 readyState 的 值 为 1 时 ， 用 户 在 调用 
open() 方 法 后 可 调用 这 个 方法 ， 和 否则， 将 得 到 一 个 异常 。 

(5) getResponseHeader() 方 法 。 

getResponseHeader() 方 法 用 于 检索 响应 的 头 部 值 。 仅 当 readyState 的 值 为 3 或 4( 换 句 话 
说 ， 在 响应 头 部 可 用 以 后 ) 时 ， 才 可 以 调用 这 个 方法 ， 否 则 ， 该 方法 将 返回 一 个 空 字符 串 。 

(6) getAll]ResponseHeaders() 方 法 。 

getAllResponseHeaders() 方 法 以 一 个 字符 串 的 形式 返回 所 有 的 响应 头 部 (每 一 个 头 部 占 单 独 
的 一 行 )。 如 果 readyState 的 值 不 是 3 或 4， 则 该 方法 将 返回 null。 


19.2.2 发 出 Ajax 请 求 


在 Ajax 中 ， 许 多 使 用 XMLHttpRequest 的 请 求 都 是 从 一 个 HIML 事件 中 被 初始 化 的 。 
Ajax 支持 包括 表单 校 验 在 内 的 各 种 应 用 程序 。 有 时 ， 在 填充 表单 的 其 他 内 容 之 前 要 求 校 验 一 
个 唯一 的 表单 域 。 例 如 要 求 使 用 一 个 唯一 的 UserID 注册 表单 。 如 果 不 是 使 用 AJAX 技术 校 验 
这 个 UserID 域 ， 那 么 整个 表单 都 必须 被 填充 和 提交 。 如 果 该 UserID 不 是 有 效 的 ， 那 么 必须 
重新 提交 该 表单 。 例 如 ， 一 个 要 求 必须 在 服务 器 端 进行 校 验 的 Catalog ID 的 表单 域 可 按 下 列 
形式 指定 : 

<form name="validationForm" action="validateForm" method="post"> 

<table> 

<tr><td>catalog Id:</td> 
<td> 
<input type="text" size="20" id="catalogId" name="catalogId" 
autocomplete="off" onkeyup="sendRequest ()"> 
</td> 
<td><div id="validationMessage"></div></td> 
E> 
</table></form> 


上 述 代 码 中 的 HTML 使 用 validationMessage div 显示 相对 于 该 输入 域 Catalog Id 的 一 个 校 
验 消 息 。onkeyup 事件 调用 一 个 JavaScript sendRequest(0) 函 数 。sendRequest0) 函 数 创建 了 一 个 
XMLHttpRequest 对 象 。 创 建 一 个 XMLHttpRequest 对 象 的 过 程 因 浏览 器 实现 的 不 同 而 有 所 
区 别 。 

如 果 浏 览 器 支持 XMLHttpRequest 对 象 作为 一 个 窗口 属性 ， 那 么 ， 代 码 可 以 调用 
XMLHttpRequest 的 构造 器 。 如 果 浏 览 器 把 XMLHttpRequest 对 象 实现 为 一 个 ActiveXObject 对 
象 ， 那 么 ， 代 码 可 以 使 用 ActiveXObject 的 构造 器 。 下 面 的 函数 将 调用 一 个 initO 函 数 。 

<script type="text/javascript"> 

function sendRequest(){ 

Var xmlHttpReq=init(); 

function init(){ 


if (window.XMLHttpRequest) { 
return new XMLHttpRequest (); 


} 
else if (window.ActiveXObject) { 
return new ActiveXObject ("Microsoft .XMLHTTP"); 
} 
</script> 
接 下 来 ， 用 户 需要 使 用 Open0 方 法 初始 化 XMLHttpRequest 对 象 ， 从 而 指定 HTTP 方法 
和 要 使 用 的 服务 器 URL。 


var 
catalogId=encodeURIComponent (document .getElementById ("catalogId") .value); 
xmlHttpReq.open ("GET", "validateForm?catalogId=" + catalogId， true); 


默认 情况 下 ， 使 用 XMLHttpRequest 发 送 的 HTTP 请 求 是 异步 进行 的 ， 但 是 用 户 可 将 
async 的 值 设置 为 tue。 在 这 种 情况 下 ， 对 URL validateForm 的 调用 将 激活 服务 器 端的 
servlet。 但 是 用 户 应 该 能 够 注意 到 服务 器 端 技术 不 是 根本 性 的 ， 实际 上 ， 该 URL 可 能 是 一 个 
ASP、ASP.NET 或 PHP 页 面 或 一 个 Web 服务 ， 只 要 该 页 面 能 够 返回 一 个 响应 ， 指 示 
CatalogID 值 是 否 是 有 效 的 即 可 。 因 为 用 户 在 作 异 步调 用 时 ， 需 要 注册 一 个 XMLHttpRequest 
对 象 来 调用 回调 事件 处 理 器 ， 当 它 的 readyState 值 改变 时 才 进 行 调用 。 记 住 ，readyState 值 的 
改变 将 会 激发 一 个 readystatechange 事件 。 这 时 可 以 使 用 onreadystatechange 属性 注册 该 回调 
事件 处 理 器 ， 语 法 格式 如 下 : 


xmlHttpReq.onreadystatechange=processRequest; 


最 后 ， 需 要 使 用 send0 方 法 发 送 该 请 求 。 因 为 这 个 请 求 使 用 的 是 HITP GET 方法 ， 所 
以 ， 用 户 在 不 指定 参数 或 使 用 null 参数 的 情况 下 可 以 调用 send0 方 法 。 


xmlHttpReq.send (null); 


19.2.3 ”处 理 服 务 器 响应 


在 上 一 节 示例 中 ， 因 为 HITP 方法 是 GET， 所 以 在 服务 器 端的 接收 servlet 将 调用 一 个 
doGet() 方 法 。 该 方法 将 检索 在 URL 中 指定 的 catalogId 的 值 ， 并 从 一 个 数据 库 中 检查 它 的 有 
效 性 。 

该 示例 中 的 servlet 需要 构造 一 个 发 送 到 客户 端的 响应 ; 而且， 该 示例 返回 的 是 XML 类 
型 ， 因 此 ， 它 把 响应 的 HTTP 内 容 类 型 设置 为 text/xml 并 且 把 Cache-Control 的 头 部 设置 为 
no-cache。 设 置 Cache-Control 头 部 可 以 阻止 浏览 器 简单 地 从 缓存 中 重 载 页 面 。 

有 具体 的 代码 如 下 : 

public void doGet (HttpServletRequest request, 


HttpServletResponse response) 
throws ServletException, IOException { 


response.setContentType ("text/zxml"); 
response.setHeader ("Cache-Control", "no-cache") 7 


} 
从 上 述 代 码 中 可 以 看 出 ， 来 自 于 服务 器 端的 响应 是 一 个 XML DOM 对 象 ， 此 对 象 将 创建 
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一 个 XML 字符 串 ， 其 中 包含 要 在 客户 端 进行 处 理 的 指令 。 另 外 ， 该 XML 字符 串 必须 有 一 个 
根 元 素 。 代 码 如 下 : 


out.println("<catalogId>valid</catalogId>"); 


设计 XMLHttpRequest 对 象 的 目的 是 为 了 处 理由 普通 文本 或 XML 组 成 的 响 
让 应 ; 但 是 ， 一 个 响应 也 可 能 是 另外 一 种 类 型 ， 如 果 用 户 代理 支持 这 种 内 容 类 型 
的 话 。 

当 请 求 状态 改变 时 ，XMLHttpRequest 对 象 调用 使 用 onreadystatechange 注册 的 事件 处 理 
器 。 因 此 ， 在 处 理 该 响应 之 前 ， 用 户 的 事件 处 理 器 应 该 首先 检查 readyState 的 值 和 HITP 状 
态 。 当 请 求 完成 加 载 (readyState 值 为 9) 并 且 响 应 已 经 完成 (HTTP 状态 为 "OK") 时 ， 用 户 就 可 以 
调用 一 个 JavaScript 函数 来 处 理 该 响应 。 下 列 脚 本 负责 在 响应 完成 时 检查 相应 的 值 并 调用 一 个 
ProcessResponse() 方 法 。 


function ProcessRedquest ()1{ 

if (xmlHttpReq.readyState==4){ 
if(xmlHttpReq.status==200){ 
processResponse(); 

1 

,1 


该 processResponse() 方 法 使 用 XMLHttpRequest 对 象 的 responseXML 和 responseText 属性 
检索 HTTP 响应 。 仅 当 在 响应 的 媒体 类 型 是 text/xml，application/xml 或 以 +xml 结尾 时 ， 
responseXML 才 可 用 。responseText 属性 将 以 普通 文本 形式 返回 响应 。 对 于 一 个 XML 响应 ， 
用 户 将 按 如 下 方式 检索 内 容 ， 代 码 如 下 : 


Var msg=XxmlHttpRedq.responseXML 7 


借助 于 存储 在 msg 变量 中 的 XML， 用户 可 以 使 用 DOM 方法 getElementsByTagName() 检 
索 该 元 素 的 值 ， 代 码 如 下 : 


var catalogId=msg.getElementsByTagName ("catalogId") [0] .firstChild.nodeValue; 


最 后 ， 通 过 更 新 Web 页 面 的 validationMessage div 中 的 HTML 内 容 并 借助 于 innerHTML 
属性 ， 用 户 可 以 测试 该 元 素 值 以 创建 一 个 要 显示 的 消息 ， 代 码 如 下 : 


if(catalogId=="valid"){ 
Var validationMessage = document .getElementById("validationMessage"); 
validationMessage.innerHTML = "Catalog Id is Valid"; 

， 

else 
Var validationMessage = document .getElementById("validationMessage"); 
validationMessage.innerHTML = "Catalog Id is not Valid"; 


19.3 ”实战 演练 一 一 制作 自由 拖 动 的 网 页 


Ajax 综合 了 各 个 方面 的 技术 ， 不 但 能 够 加 快 用 户 的 访问 速度 ， 还 可 以 实现 各 种 特效 。 下 
面 制作 一 个 使 用 CSS 与 Ajax 自由 拖 放 的 网 页 。 

具体 的 操作 步骤 如 下 。 

EEIDp 在 HIML 页 面 中 建立 用 于 存放 数据 的 表格 ， 代 码 如 下 。 


<html> 
<head> 
<title> 能 够 自由 拖 动 布局 区 域 的 网 页 </title> 
</head> 
<body> 
<table cellspacing="4" width="]100%" id="parentTable"> 
<tr> 
<td width="25%" valgin="top"> 
<table class="dragTable" cellspacing="0"> 
<tr><td> 蜂 蜜 </td></tr> 
<tr><tq> 蜂 蜜 ， 是 昆虫 蜜蜂 从 开花 植物 的 花 中 采 得 的 花蜜 在 蜂巢 中 酿 制 的 蜜 。 蜜 蜂 从 
植物 的 花 中 采取 含水 量 约 为 80% 的 花蜜 或 分 泌 物 ， 存 入 自己 第 二 个 胃 中 ， 在 体内 转化 酶 的 作用 下 经 过 
30 分 钟 的 发 酵 ， 回 到 蜂巢 中 吐出 ， 蜂 巢 内 温度 经 常 保持 在 35C 左 右 ， 经 过 一 段 时 间 ， 水 份 蒸发 ， 成 为 
水 分 含量 少 于 20% 的 蜂蜜 ， 存 贮 到 巢 洞 中 ， 用 蜂蜡 密封 。</td><tr> 
</table> 
<table class="dragTable" cellspacing="0"> 
<tr><td> 蜂 王浆 </td></tr> 
<tr><td> 蜂 王浆 (royal jelly)， 又 名 蜂 皇 浆 、 蜂 乳 ， 蜂 王 乳 ， 是 蜜蜂 集中 培育 幼 
虫 的 青年 工蜂 咽 头 腺 的 分 泌 物 ， 是 供给 将 要 变 成 蜂王 的 幼虫 的 食物 。 蜂 王浆 是 高 蛋白 ， 并 含有 维生素 B 
类 和 乙酰 胆 碱 等 。 蜂 王浆 不 能 用 开水 或 茶水 冲服 ， 并 应 该 低温 贮存 。</td><tr> 
</table> 
</td> 
<td width="25%"> 
<table class="dragTable" cellspacing="0"> 
<tr><td> 蜂 花粉 </td></tr> 
<tr><td> 蜂 花粉 是 有 花 植物 雄 营 中 的 雄性 生殖 细胞 ， 它 不 仅 携带 着 生命 的 遗传 信息 ， 
而 且 包含 着 孕育 新 生命 所 必需 的 全 部 营养 物质 ， 是 植物 传宗接代 的 根本 ， 热 能 的 源泉 。 蜂 花粉 是 由 蜜蜂 
从 植物 花 中 采集 的 花粉 经 蜜蜂 加 工 成 的 花粉 团 ， 被 誉 为 “全 能 的 营养 食品 ”、“ 浓 缩 的 天 然 药 库 ”、 
“全 能 的 营养 库 ”、“ 内 服 的 化 妆 品 ”、“ 浓 缩 的 氨基 酸 ” 等 ， 是 “人 类 天 然 食 品 中 的 瑰宝 ”。 
</td><tr> 
</table> 
</td> 
<td width="25%"> 
<table class="dragTable" cellspacing="0"> 
<tr><td> 蜂 毒 </td></tr> 
<tr><td> 蜂 毒 是 一 种 透明 液体 ， 具 有 特殊 的 芳香 气味 ， 味 苦 、 呈 酸性 反应 ，PH 为 
5.0~5.5， 比 重 为 1.1313。 在 常温 下 很 快 就 挥发 干燥 至 原来 液体 重量 的 308 一 408$8，</td><tr> 
</table> 
<table class="dragTable" cellspacing="0"> 
<tr><td> 蜂 胶 </td></tr> 
<tr><td> 蜂 胶 是 蜜蜂 从 植物 芽孢 或 树干 上 采集 的 树脂 (树胶 ) ， 混 入 蜜蜂 口 器 中 腺 体 的 
分 小物 ， 再 和 花粉 、 蜂 蜡 加 工 制 成 的 一 种 胶 状 物质 ， 是 蜂巢 的 保护 多。 一 个 5 一 6 万 只 的 蜂 群 一 年 只 能 
生产 蜂胶 100 一 150 克 ， 被 誉 为 “紫色 黄金 ”</td><tr> 
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</table> 
</td> 
w/e 
</table> 
</body> 
</html> 


使 用 IE9.0 浏览 器 浏览 上 述 代 码 的 效果 如 图 19-4 所 示 。 
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Re 图 19-4 制作 基本 页 面 表格 效果 


\ 为 页 面 添加 Ajax 的 JavaSeript 代码 ， 以 及 CSS 样式 控制 ， 使 各 个 功能 模块 自由 
拖 放 。 代 码 如 下 : 


<style type="text/css"> 

人 二 二 

body{ 
font-size:12px; 
font-family:Arial, Helvetica, sans-serif; 
margin:0px; padding:0px; 
/*background-color:#ffffd5;*/ 
background-color:#e6ffda; 

i 

-dragTable{ 
font-size:12px; 
/*border:1lpx solid #003a82;*/ 
border:lpx solid #206100; 
margin-bottom: Spx; 
width:100%; 
/*background-color:#cfeSff;*/ 
background-color:#c9ffaf; 


taf 
padding:3px 2px 3px 2px; 
vertical-align:top; 


.dragTRI{ 
cursor:move; 
/*color:#FFFFFF; 
background-color:#0073ff;*/ 
color:#ffff00; 


background-color:#3cb500; 
height:20px; 
font-weight:bold; 
font-size:14px; 
font-family:Arial, Helvetica, sans-serif; 
} 
#parentTable{ 
border-collapse:collapse; 
2 
</style> 
<script language="javascript" defer="defer"> 
Var Drag={ 
dragged:false, 
ao:null, 
tdiv:null, 
dragstart:function(){ 
Drag.ao=event .srcElement; 
if((Drag.ao.tagName=="TD") || (Drag.ao.tagName=="TR"))1{ 
Drag.ao=Drag.ao.offsetParent; 
Drag.ao.style.zIndex=100; 
}else 
return; 
Drag.dragged=true; 
Drag.tdiv=document .createElement ("div"); 
Drag.tdiv.innerHTML=Drag.ao.outerHTML; 
Drag.ao.style.border="lpx dashed red"; 
Drag.tdiv.style.display="block"; 
Drag.tdiv.style.position="absolute"; 
Drag.tdiv.style.filter="alpha (opacity=70)"; 
Drag.tdiv.style.cursor="move"; 
Drag.tdiv.style.border="lpx solid #000000"; 
Drag.tdiv.style.width=Drag.ao.offsetWidth; 
Drag.tdiv.style.height=Drag.ao.offsetHeight; 
Drag.tdiv.style.top=Drag.getInfo (Drag.ao) .top; 
Drag.tdiv.style.left=Drag.getInfo (Drag.ao) .left; 
document .body.appendChild (Drag.tdiv); 
Drag.lastX=event .clientx; 
Drag.lastY=event.clientyYy; 
Drag.lastLeft=Drag.tdiv.style.left; 
Drag.lastTop=Drag.tdiv.style.top; 


}, 
draging:function() {// 判 断 MoUSsE 的 位 置 
if(!Drag.dragged| |Drag.ao==null) return; 
Var txX=event.clientx; 
Var tY=event.clientYy; 
Drag.tdiv.style.left=parseInt (Drag.lastLeft)+tX-Drag.lastx; 
Drag.tdiv.style.top=parseInt (Drag.lastTop)+tY-Drag.lastYy; 
for (var i=0;i<parentTable.cells.length;i++){ 
var parentCel1=Drag.getInfo (ParentTable.cells[i]l)> 
if (txX>=parentCell.left&&tX<=parentCell.right&&tY>= 
parentCell.top&g&tY<=parentCell .bottom){ 
var subTables=parentTable.cells[i] .getElementsByTagName ("table"™"); 
if(subTables.length==0){ 
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if (txX>=parentCell.leftg&tx<=parentCell.right&g&tY>= 
parentCell .top&&tY<=parentCell .bottom){ 
parentTable.cells[i] .appendChild (Drag.ao); 
} 
break; 
} 
for (var j=0;j<subTables.length;j++){ 
var subTable=Drag-getInfo (subTables[j]) > 
if (txX>=subTable.leftg&gtX<=subTable.right&g&tY>= 
subTable .top&&tY<=subTable.bottom) { 
parentTable.cells[i] .insertBefore (Drag.ao, subTables[j]); 
break; 
}elsef{ 
parentTable.cells[i] .appendChild(Drag.ao); 


}, 
dragEnd:function(){ 
if(!Drag.dragged) 
return; 
Drag.dragged=false; 
Drag .mm=Drag.repos (150,15); 
Drag.ao.style.borderWidth="0px"; 
//Drag.ao.style.border="lpx solid #003a82"; 
Drag.ao.style.border="lpx solid #206100"; 
Drag.tdiv.style.borderWidth="0px"; 
Drag.ao.style.zIndex=1; 
}, 
getInfo:function (0o) {// 取 得 坐标 
Var to=new Object (); 
to.left=to.right=to.top=to.bottom=0; 
Var twidth=o.offsetWidth; 
Var theight=o.offsetHeight; 
while(o!=document .body) { 
to .left+=o.offsetLeft7 
to.top+=o.offsetTop7 
o=o.offsetParent7 
to.right=to.left+twidth; 
to.bottom=to.top+theight; 
return to; 
}, 
repos:function(aa,ab){ 
var f=Drag.tdiv.filters.alpha.opacity; 
Var tl=parseInt (Drag.getInfo (Drag.tdiv) .left); 
Var tt=parseInt (Drag.getInfo (Drag.tdiv) .top); 
var kl=(tl-Drag.getInfo (Drag.ao) .left) /ab; 
var kt= (tt-Drag-getInfo (Drag.ao) .top) /ab; 
var kf=f/ab; 
return setInterval (function(){ 
if(ab<1){ 
clearInterval (Drag .mm); 


Drag.tdiv.removeNode (true); 
Drag.ao=null; 
return; 


£f-=kf; 
Drag.tdiv.style.left=parseInt (tl1)+"px"; 
Drag.tdiv.style.top=parseInt (tt)+"px"; 
Drag.tdiv.filters.alpha.opacity=f; 


; 
raa/ab) 
}, 
inint:function(){ 
for (Var i=0;i<parentTable.cells.length;i++){ 
Var 
subTables=parentTable.cells[i] .getElementsByTagName ("table"); 
for (var j=0;j<subTables.length;j++){ 
if(subTables[j] .className!="dragTable") 
break; 
subTables[j] .rows [0] .className="dragTR"; 


subTables [j] .rows [0] .attachEvent ("onmousedown",Drag.dragSstart); 
} 
} 
document .onmousemove=Drag.draging; 
document .onmouseup=Drag .dragEnd; 
} 
) 
Drag.inint(); 
</script> 


使 用 IE9.0 浏览 器 浏览 上 述 代 码 的 效果 如 图 19-5 所 示 。 


(OD enna pox|S ewanm nn | | 合 安 加 


文件 (站 。 篇 得 (E) 。 坦 看 (V) 收藏 突 (A) 工具 (T) 帮助 (H) 


气味 ， 味 苦 、 呈 可 性 反应 ，pH 为 50~ 
5.5， 比 重 为 11313。 在 常温 下 很 快 就 


| 蜂王 北 (royal jelly) ， 又 名 蛙 皇 效 、 蜂 
| 乳 ， 蜂 王 乳 ， 是 窗 暗 中 培 商 幼 中 的 青 
年 工蜂 响 头 腺 的 分 泌 物 


， 是 供给 将 要 朗 
| 成 兰 王 的 幼虫 的 食 初 。 蛙 王 菜 是 高 二 
生生。 
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19.4” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: XML Http Request 对 象 的 使 用 方法 。 
练习 2: Ajax 请 求 发 出 的 方法 。 

练习 3: 处 理 器 如 何 进行 响应 。 

练习 4: 如 何 制作 自由 拖 动 的 网 页 。 


19.5 高 手 甜 点 


甜点 1: 在 发 送 Ajax 请 求 时 ， 使 用 GET 还 是 使 用 POST? 


与 POST 相 比 ，GET 更 简单 也 更 快 ， 并 且 在 大 部 分 情况 下 都 能 用 。 然 而 ， 在 以 下 情况 
请 使 用 POST 请 求 : 

®@ ”无 法 使 用 缓存 文件 (更 新 服务 器 上 的 文件 或 数据 库 )。 

@ ”向 服务 器 发 送 大 量 数据 (POST 没有 数据 量 限制 )。 

@ ”发 送 包 含 未 知 字符 的 用 户 输 入 时 ，POST 比 GET 更 稳定 也 更 可 靠 。 


甜点 2: 在 指定 Ajax 的 异步 参数 时 ， 应 将 该 参数 设置 为 True 还 是 False? 
Ajax 指 的 是 异步 JavaScript 和 XML。XMLHttpRequest 对 象 如 果 被 用 于 AJAX 的 话 ， 其 
open() 方 法 的 asyne 的 参数 值 必须 设置 为 tue， 代码 如 下 : 


xmlhttp.open ("GET","ajax test.asp",true); 


对 于 web 开发 人 员 来 说 ， 发 送 异 步 请 求 是 一 个 巨大 的 进步 。 在 服务 器 执行 的 很 多 任务 都 
相当 耗 时 。 在 AJAX 出 现 之 前 ， 这 可 能 会 引起 应 用 程序 挂 起 或 停止 。 通 过 AJAX，JavaScript 
无 需 等 待 服务 器 的 响应 ， 而 是 在 等 待 服务 器 响应 时 执行 其 他 脚本 ， 当 响应 就 绪 后 对 响应 进行 
处 理 。 
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ript 中 解脱 出 来 ， 以 便 后 人 在 遇 到 
的 开发 效率 ， 程 序 员 开始 重视 程序 功能 上 
ript 脚本 库 。 


随 着 互联 网 的 快速 发 展 ， 为 从 烦琐 的 JavaSec 


相同 问题 时 可 以 直接 使 用 ， 从 而 提高 项 目 
的 封装 与 开发 。 其 中 jQuery 就 是 一 个 优秀 的 JavaSc 
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20.1.1 jQuery 能 做 什么 


jQuery 概述 


jQuery 是 一 个 兼容 多 浏览 器 的 javascript 框架 ， 它 的 核心 理念 是 ( 写 得 更 少 ， 做 得 更 多 )。 
jQuery 在 2006 年 1 月 由 美国 人 John Resig 在 纽约 发 布 ， 吸 引 了 来 自 世 界 各 地 的 众多 
JavaScript 高 手 加 入 。 现 在 ，jQuery 已 成 为 流行 的 javascript 框架 之 一 。 


发 展 成 为 集 JavaScript、CSS、DOM 和 Ajax 于 一 体 的 优秀 框架 。 其 模块 化 的 使 用 方式 使 开发 


者 可 以 很 轻松 地 开发 出 功能 强大 的 静态 或 动态 网 页 。 例 如 中 国 网 络 电视 台 、 


等 ， 很 多 网 站 的 动态 效果 都 是 利用 jQuery 脚本 库 制 作出 来 的 。 

下 面 介绍 一 下 京东 商城 应 用 的 jQuery 效果 。 访 问 京东 商城 的 首页 时 ， 在 右 侧 有 一 个 话 
费 、 旅 行 、 彩 票 、 游 戏 栏目 ， 这 里 应 用 的 就 是 jQuery。 将 鼠标 移动 到 【话费 】 栏 目 上 ， 标 签 
页 中 将 显示 手机 话费 充值 的 相关 内 容 ， 如 图 20-1 所 示 ; 将 鼠标 移动 到 【游戏 】 栏 目 上 ， 标 签 
页 中 将 显示 游戏 充值 的 相关 内 容 ， 如 图 20-2 所 示 。 


OS 京 蒜 高 吉 襄 - | 国 户 - C X | 罗京 和 网 上 商城- 妹 全 网 。 


文件 (F] ”编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
ra - 


旅行 彩票 游戏 
手机 号 : [请 输入 手机 号 
支持 移动 、 联通、 电信 


面值 : 100 元 四 98.0-100.0 


充 活 本 送 万 达 《 信 归 大 师 》 影 村 


20-1 话费 栏目 显示 效果 


20.1.2 jQuery 的 特点 


1 [ 本 » 
http//chongzhijd.com/ 入 100% ~ 


NN 起 初 ，jQuery 所 提供 的 功能 非常 有 限 ， 仅 仅 能 增强 CSS 的 选择 器 功能 ， 现 在 jQuery 已 经 


CCTV、 京 东 商 城 


@S 高 s 记 个- 国 吕 ” 虽 C X | 罗京 天 同上 商城 全 网 。x 


文件 (有 ] 。 编 句 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
-~ 


话费 旅行 
点 卡 aoa 


神 类 : |oi 


面值 : 1 元 (可 自选 数量 ) 
加 在 线 充值 


¥1.00 


笑 币 江湖 卉 炎 列 影 马 


i 


成 100% ~ 


图 20-2 游戏 栏目 显示 效果 


jQuery 是 一 个 简洁 快速 的 JavaScript 脚本 库 ， 其 独特 的 选择 器 、 链 式 的 DOM 操作 方式 、 


jQuery 的 主要 特点 如 下 。 


事件 绑 定 机 制 、 封 装 完善 的 Ajax 都 是 其 他 JavaScript 库 望 尘 莫 及 的 。 


(1) 代码 短小 精湛 。jQuery 是 一 个 轻 量 级 的 JavaScript 脚本 库 ， 其 代码 非常 短小 ， 采 用 
Dean Edwards 的 Packer 压缩 后 ， 大 小 不 到 30KB; 如 果 服 务 器 端 启用 gzip 压缩 后 ， 大 小 只 


有 16KB! 


(2) 强大 的 选择 器 支持 。jQuery 可 以 让 操作 者 使 用 从 CSS 1 到 CSS 3 几乎 所 有 的 选择 
器 ， 以 及 jQuery 独创 的 高 级 而 复杂 的 选择 器 。 
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(3) 出 色 的 DOM 操作 封装 。jQuery 封装 了 大 量 常用 DOM 操作 ， 使 用 户 在 编写 DOM 操 
作 相 关 程 序 的 时 候 能 够 得 心 应 手 ， 优 雅 地 完成 各 种 原本 非常 复杂 的 操作 ， 让 JavaScript 新 手 也 
能 写 出 出 色 的 程序 。 

(4) 可 靠 的 事件 处 理 机 制 。jQuery 的 事件 处 理 机 制 吸取 了 JavaScript 专家 Dean Edwards 
编写 的 事件 处 理 函 数 的 精华 ， 使 得 jQuery 在 处 理事 件 绑 定 的 时 候 相当 的 可 靠 。 在 预 留 退路 方 
面 ，jQuery 也 做 得 非常 不 错 。 

(5) 完善 的 Ajax。jQuery 将 所 有 的 Ajax 操作 封装 到 $.ajax 函数 里 ， 使 得 用 户 在 处 理 Ajax 
的 时 候 能 够 专心 处 理 业务 逻辑 ， 而 无 需 关 心 复杂 的 浏览 器 的 兼容 性 、XML Http Request 对 象 
的 创建 和 使 用 问题 。 

(6) 出 色 的 浏览 器 兼容 性 。 作 为 一 个 流行 的 JavaScript 库 ， 浏 览 器 的 兼容 性 自然 是 必须 具 
备 的 条 件 之 一 ，jQuery 能 够 在 正 6.0+、FF 2+、Safari 2.0+ 和 Opera 9.0+ 下 正常 运行 。 同 时 修 
复 了 一 些 浏览 器 之 间 的 差异 ， 使 用 户 不 用 在 开展 项 目前 因 忙 于 建立 一 个 浏览 器 兼容 库 而 焦 头 
烂 额 。 

(7) 丰富 的 插件 支持 。 任 何事 物 的 壮大 ， 如 果 没有 很 多 人 的 支持 ， 是 发 展 不 起 来 的 。 
jQuery 的 易 扩展 性 ， 吸 引 了 来 自 全 球 的 开发 者 共同 编写 jQuery 的 扩展 插件 。 目 前 已 有 上 百 种 
官方 支持 的 插件 。 

(8) 开源 特点 。jQuery 是 一 个 开源 产品 ， 任 何人 都 可 以 自由 使 用 。 


20.2 jQuery 的 配置 


AenD 广 一 册 吵 弟 宰 下 1duoSeAer_ 贡 0z 小 


如 果 想 在 开发 网 站 的 过 程 中 应 用 jQuery 库 ， 那 么 就 需要 对 其 进行 配置 它 。jQuery 是 一 个 
开源 脚本 库 ， 可 以 从 其 官方 网 站 (http://jquery.com) 中 下 载 。 将 jQuery 库 下 载 到 本 地 计算 机 
后 ， 需 要 在 项 目 中 配置 jQuery 库 ， 即 将 后 缀 名 为 js 的 文件 放置 到 项 目的 指定 文件 夹 中 ， 通 常 
放置 在 JS 文件 夹 中 ， 然 后 根据 需要 应 用 到 jQuery 的 页 面 中 ， 使 用 以 下 语句 ， 将 其 引用 到 
文件 中 : 


<script src="jquery.min.js"type="text/javascript" ></script> 


<script Language="javascript" src="jquery.min.js"></script> 


> 引用 jQuery 的 <script> 标 签 ， 必 须 放 在 所 有 的 自 定 义 脚本 的 <script> 之 前 ， 否 则 
由 在 自 定义 的 脚本 代码 中 应 用 不 到 jQuery 脚本 库 。 


20.3 使 用 jQuery 的 插件 


在 jQuery 官方 网 站 中 有 很 多 现成 的 插件 ， 在 官方 主页 中 单 击 Plugins 超 链接 ， 即 可 在 打 
的 页 面 中 查看 和 下 载 jQuery 提供 的 插件 ， 如 图 20-3 所 示 。 
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The jQuery Plugin Registry 


图 20-3 插件 下 载 页 面 

20.3.1 常见 的 jQuery 的 插件 

常见 的 jQuery 的 插件 有 以 下 4 种 。 

1. jQueryUI 插件 

jQueryUI 是 一 个 基于 jQuery 的 用 户 界面 开发 库 ， 主 要 由 UI 小 部 件 和 CSS 样式 表 集 合 
成 ， 它 们 被 打包 到 一 起 以 完成 日 常任 务 。UI 插件 主要 可 以 实现 拖 搜 、 排 序 、 选 择 和 缩放 等 鼠 
标 互动 效果 ， 另 外 还 可 以 实现 折 车 菜单 、 日 历 、 对 话 框 、 滑 动 条 、 表 格 排 序 、 页 签 、 放 大 镜 
效果 和 阴影 效果 等 。 

2. Form 插件 

jQuery Form 插件 是 一 个 优秀 的 Ajax 表单 插件 ， 它 能 使 HTML 表单 非常 容易 地 支持 
Ajax。jQuery Form 有 两 个 核心 方法 : ajaxForm0 和 ajaxSubmit0， 它 们 集合 了 从 控制 表单 元 素 
到 决定 如 何 管理 提交 进程 的 功能 。 另 外 ，Form 插件 还 包括 一 些 其 他 的 方法 ， 例 如 
formToArray() 、formSerialize0 、 fieldSerialize() 、fieldValue() 、clearForm() 、 clearFields() 和 
resetForm() 等 。 


3. 提示 信息 插件 

在 网 站 开发 过 程 中 ， 有 时 想 要 实现 一 些 提示 ， 例 如 当 鼠 标 移 动 到 某 个 关键 词 上 时 ， 会 弹 
出 一 段 相关 的 文字 。 这 就 需要 使 用 jQuery 的 cluetip 插件 。 

clueTip 是 一 个 jQuery 工具 提示 插件 ， 可 以 方便 地 为 链接 或 其 他 元 素 添加 Tooltip 功能 。 
当 链 接 包括 title 属性 时 ， 它 的 内 容 将 变 成 clueTip 的 标题 。clueTip 中 显示 的 内 容 可 以 通过 
Ajax 获取 ， 也 可 以 从 当前 页 面 中 的 元 素 中 获取 。 

4. jcarousel 插件 


jcarousel 是 一 款 jQuery 插件 ， 用 来 控制 水 平 或 垂直 排列 的 列表 项 。 如 图 20-4 所 示 的 滚动 
切换 效果 ， 单 击 左右 两 侧 的 箭头 可 以 向 左 或 者 向 右 查 看 图 片 。 当 到 达 第 一 张 图 片 时 ， 左 边 的 
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箭头 变 为 不 可 用 状态 ， 当 到 达 最 后 一 张 图 片 时 ， 右 边 的 箭头 变 为 不 可 用 状态 。 
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图 20-4 ”图 片 滚 动 切换 效果 


20.3.2 ”案例 一 一 如 何 使 用 插件 


由 于 JQuery 插件 其 实 就 是 js 包 ， 所 以 其 使 用 方法 比较 简单 ， 具 体 步 又 如 下 。 
EDp 将 下 载 的 插件 或 者 自 定义 的 插件 放 在 主 jQuery 源 文件 下 ， 然 后 在 <head> 标 记 中 
引用 插件 js 文件 和 JQuery 库 文件 。 
包含 一 个 自 定义 的 JavaScript 文件 ， 并 在 其 中 使 用 插件 创建 的 方法 。 
下 面 通过 一 个 实例 来 讲解 具体 的 使 用 方法 。 
【 例 20.1】 (实例 文件 ，ch02\20.1.html)。 步 又 如 下 : 
到 官网 下 载 jquery.form.js 文件 ， 然 后 放 在 网 站 目录 下 。 
葬 于 BY 创建 服务 器 端 处 理 文件 20.1.aspx 文件 ， 然 后 放 在 网 站 目录 下 。 具 体 代码 如 下 : 


<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> 
<%@ Import Namespace="System.Data" %> 
< 多 
Response .CacheControl = "no-cache"; 
Response.AddHeader ("Pragma", "no-cache"); 
string back = ""; 
back += "用 户 : "+Request ["name"]7 
back += "<br>"; 
back += "评论 : "+Request["comment"]; 
Response.Write (back); 
%> 


TE> 新 建 网 页 文件 20.1.html， 在 head 部 分 引入 jQuery 库 和 Form 插件 库 文件 ， 具 体 
代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<script src="jquery.min.js"></script> 
<script src="jquery.form.js"></script> 
<script> 


// 等 待 加 载 
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$ (document) .ready (function() { 
// 给 myForm 绑 定 一 个 回调 函数 
$('#myForm') .ajaxForm(function() { 
alert (" 恭 喜 ， 评 论 发 表 成 功 ! ") ; 
DD); 
L 
</script> 
</head> 
<body> 
<form id="myForm" action="19.1.aspx" method="post"> 
用 户 名 : <input type="text" name="name" /> 
</br> 
评论 内 容 : <textarea name="comment"></textarea> 
<input type="submit" value=" 发 表 评 论 " /> 
</form> 
</body> 


在 正 9.0 浏览 器 中 运行 上 述 代 码 ， 在 显示 页 面 中 输入 用 户 名 和 评论 内 容 后 单 击 【 发 表 评 
论 】 按 钮 ， 效 果 如 图 20-5 所 示 。 
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评论 内 容 : 


图 20-5 程序 运行 结果 
20.4 jQuery 选择 器 


在 JavaScript 中 ， 如 果 用 户 想 获取 元 素 的 DOM 元 素 ， 就 必须 使 用 该 元 素 的 ID 和 
TagName。 而 在 jQuery 库 中 却 有 许多 功能 强大 的 选择 器 帮助 用 户 获 取 页 面 上 的 DOM 元 素 ， 
而 且 获 取 到 的 每 个 对 象 都 以 jQuery 包装 集 的 形式 返回 。 


20.4.1 案例 一 一 jQuery 的 工厂 函数 


$ 是 jQuery 中 最 常用 的 一 个 符号 ， 用 于 声明 jQuery 对 象 。 可 以 说 ， 在 jQuery 中 ， 无 论 使 
用 哪 种 类 型 的 选择 器 都 需要 从 一 个 8 符号 和 一 对 0 开始 。 在 0 中 通常 使 用 字符 串 参 数 ， 参 数 中 
可 以 包含 任何 CSS 选择 符 表达 式 。 其 通用 语法 格式 如 下 : 


$ (selector) 


$ 常 用 的 用 法 有 以 下 几 种 。 
e ”在 参数 中 使 用 标记 名 ， 例 如 $("div")， 用 于 获取 文档 中 全 部 的 <div>。 


a 


@ ”在 参数 中 使 用 人 D， 例 如 $("#usename")， 用 于 获取 文档 中 ID 属性 值 为 usename 的 一 
个 元 素 。 

e@ ”在 参数 中 使 用 CSS 类 名 ,例如 $(".btmm_grey")， 用 于 获取 文档 中 使 用 CSS 类 名 为 
btn_grey 的 所 有 元 素 。 

【 例 20.2】 (实例 文件 : ch20\20.2.html) 选 择 文本 段落 中 的 奇数 行 。 代 码 如 下 : 


<html> 
<head> 
<title>$ 符 号 的 应 用 </title> 
<script language="javascript" src="jquery-1.11.0.min.js"></script> 
<script language="javascript"> 
window.onload = function(){ 

Var oElements = $("p:0dd"); // 选 择 匹 配 元 素 

forl(var i=0;i<oElements.length;i++) 

oElements[i].innerHTML = i.tostring(); 
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</script> 
</head> 

<body> 

ES 
<p> 第 一 行 </p> 
<p> 第 二 
<p> 第 三 行 </ 
<p> 第 四 行 </p> 
<p> 第 五 行 </p> 
</div> 
</body> 
</html> 


上 述 代码 运行 结果 如 图 20-6 所 示 。 
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图 20-6 “$” 符 号 的 应 用 


20.4.2 ”案例 一 一 常见 选择 器 


在 jQuery 中 ， 常 见 的 选择 器 有 以 下 5 种 。 
1. 基本 选择 器 


jQuery 的 基本 选择 器 是 应 用 最 广泛 的 选择 器 ， 它 是 其 他 类 型 选择 器 的 基础 ， 是 jQuery 选 
择 器 中 最 为 重要 的 部 分 。jQuery 的 基本 选择 器 包括 ID 选择 器 、 元 素 选择 器 、 类 别 选 择 器 、 复 
合 选择 器 等 。 


2. 层级 选择 器 
层级 选择 器 根据 DOM 元 素 之 间 的 层次 关系 获取 特定 的 元 素 ， 例 如 后 代 元 素 、 子 元 素 、 
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相 邻 元 素 和 兄弟 元 素 等 。 
3. 过 滤 选 择 器 


jQuery 过 滤 选 择 器 主要 包括 简单 过 滤器 、 内 容 过 滤器 、 可 见 性 过 滤器 、 表 单 对 象 的 属性 
选择 器 和 子 元 素 选择 器 等 。 


4. 属性 选择 器 


属性 选择 器 是 通过 元 素 的 属性 作为 过 滤 条 件 进行 筛选 对 象 的 选择 器 ， 常 见 的 属性 选择 器 
主要 有 [attribute]、[attribute=value]、[attribute!l=value]、[attribute$=value] 等 。 

5. 表单 选择 器 

表单 选择 器 用 于 选取 经 常 在 表单 内 出 现 的 元 素 。 不 过 ， 选 取 的 元 素 并 不 一 定 在 表单 之 
中 。jQuery 提供 的 表单 选择 器 主要 包括 :input 选择 器 、:text 选择 器 、: password 选择 器 、 
password 选择 器 、:radio 选择 器 、:checkbox 选择 器 、:submit 选择 器 、:reset 选择 器 、:button 选 
择 器 、:image 选择 器 、:file 选择 器 。 

下 面 以 表单 选择 器 为 例 讲 解 使 用 选择 器 的 方法 。 

【 例 20.3】 (实例 文件 : ch20\20.3.html) 为 页 面 中 类 型 为 fle 的 所 有 <input> 元 素 添加 背景 
色 。 代 码 如 下 : 

<html> 

<head> 


<script type=" "text/javascript" src="jquery-1.11.0.min.js"></script> 
<script a et 


}) 

De i 

</head> 

<body> 

<form action=""> 

下 了 <input type="text" name=" 姓 名 " 

Sr /> 

密码 : 和 type="password" es /> 


ee type="button"> 按 钮 眶 信里 3 ;907 


<input type="button" value=" 

<br /> 

<input type="reset" value= "看,/ 
EE type="submit"” value=" 提 交 " 六 


b, 
特 域 3 : <input type="file"> 


</form> 

</body> 

</html> 

上 述 代 码 运 行 结果 如 图 20-7 所 示 。 从 中 可 以 看 到 网 页 中 表单 类 型 为 file 的 元 素 被 添加 上 
了 背景 色 。 


20-7 ”表单 选择 器 的 应 用 效果 
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20.5 jQuery 控制 页 面 


在 网 页 制作 的 过 程 中 ，jQuery 具有 强大 的 功能 ， 本 节 主 要 介绍 jQuery 如 何 控制 页 面 、 对 
标记 的 属性 进行 操作 、 对 表单 元 素 进行 操作 和 对 元 素 的 CSS 样式 进行 操作 等 。 


20.5.1 案例 一 一 对 标记 的 属性 进行 操作 


jQuery 提供 了 对 标记 属性 进行 操作 的 方法 。 
1. 获取 属性 的 值 


jQuery 提供 的 attr0 方 法 主要 用 于 设置 或 返回 被 选 元 素 的 属性 值 。 
【 例 20.4】 (实例 文件 ，ch20W20.4.html) 获 取 属 性 值 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script src="jquery.min.js"></script> 
<script> 
$ (document) .ready (function(){ 
$("button") .click(function(){ 
alert ("图 像 宽 度 为 : " + $ ("img") .attr("width")); 
); 
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</head> 

<body> 

<img src="123.jpg" /> 

<br YS> 

<button> 查 看 图 像 的 宽度 </button> 
</body> 

</html> 


在 下 9.0 浏览 器 中 运行 上 述 代 码 ， 单 击 页 面 中 的 【查看 图 像 的 宽度 】 按 钮 ， 最 终 显示 效 
果 20-8 所 示 。 


20-8 ”程序 运行 结果 


2. 修改 属性 的 值 
attr0 方 法 除了 可 以 获取 元 素 的 值 之 外 ， 还 可 以 通过 它 设置 属性 的 值 。 其 语法 格式 如 下 : 
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attr (name ,value); 


其 中 ， 可 将 元 素 的 所 有 项 的 属性 name 的 值 设 置 为 value。 
【 例 20.5】 (实例 文件 : ch20\20.5html) 修 改 属性 值 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script src="jquery.min.js"></script> 
<script> 
$ (document) .ready (function(){ 
$("button") .click(function(){ 
$ ("img") .attr ("width","300"); 
]) 7 
Ds; 
</script> 
</head> 
<body> 
<img src="123.jpg" /> 
<br /> 
<button> 修 改 图 像 的 宽度 </button> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 20-9 所 示 。 单 击 【 修 改 图 像 的 宽度 】 按 钮 ， 最 终 
显示 效果 如 图 20-10 所 示 。 
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图 20-9 程序 初始 效果 图 20-10 程序 运行 效果 


3. 删除 属性 的 值 


使 用 jQuery 提供 的 removeAttr 方法 来 删除 属性 的 值 。 
【 例 20.6】 (实例 文件 ，ch20\20.6.htmD) 删 除 属性 值 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script src="jquery.min.js"></script> 

<script type="text/javascript"> 


$ (document) .ready (function(){ 

$ ("button") .click(function(){ 

$("p") .removeAttr ("style"); 

Ds; 
</script> 
</head> 
<body> 
<h1> 观 沧海 </h1> 
<p style="font-size: 120%;color:red"> 东 临 碍 石 ， 以 观 沧海 。 </p> 
<P> 水 何 渔 光 ， 山 岛 羔 峙 。</P> 
<button> 删 除 所 有 p 元 素 的 style 属性 </button> 
</body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 20-11 所 示 。 单 击 【删除 所 有 P 元素 的 style 
属性 】 按 钮 ， 最 终结 果 如 图 20-12 所 示 。 


NanD 一 开 吵 济 守 骂 1duoSeAer 乾 02 汀 


GG 


on 6- Ox | DR 
DO ew SO Dr rT Cre 
文件 (F]】 _ 廊 而 (5)】 合 看 (V】 收藏 志 (A| 工具 (7 帮助 IH) 


TEN 


观 沧海 观 沧 海 


东 临 碍 石 ， 以 观 沧海 - 
水 何 渔 注 ， 山 岛 晤 娃 。 


东 临 码 石 ， 以 观 沧海 。 
水 何 渡 注 ， 山 多 一 娃 。 


图 20-11 程序 初始 效果 图 20-12 程序 运行 效果 


20.5.2 ”案例 一 一 对 表单 元 素 属性 进行 操作 


jQuery 提供 了 对 表单 元 素 进行 操作 的 方法 。 
1. 获取 表单 元 素 的 值 


val() 方 法 用 来 返回 或 设置 被 选 元 素 的 值 。 元 素 的 值 通过 value 属性 设置 。 该 方法 大 多 用 于 
表单 元 素 。 如 果 该 方法 未 设置 参数 ， 则 返回 被 选 元 素 的 当前 值 。 
【 例 20.7】 (实例 文件 :ch20\20.7.htmlD) 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script src="jquery.min.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function(){ 

$ ("button") .click(function(){ 

alert ($ ("input:text") .val ()); 
DD); 
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1); 

</script> 

</head> 

<body> 

名 称 : <input type="text" name="fname"” value=" 冰 箱 " /><br /> 

类 别 : <input type="text" name="lname"” value=" 电 器 " /><br /><br /> 
<button> 获 得 第 一 个 文本 域 的 值 </button> 

</body> 

</html> 


在 IE 9.0 浏览 器 中 运行 上 述 代 码 ， 在 页 面 中 单 击 【 获 得 第 一 个 文本 域 的 值 】 按 钮 ， 最 终 
显示 效果 如 图 20-13 所 示 。 
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图 20-13 程序 运行 效果 
2. 设置 表单 元 素 的 值 
val( 方 法 还 可 以 用 来 设置 表单 元 素 的 值 。 具 体 的 使 用 语法 格式 如 下 : 


$ ("selector") .val (value) 


【 例 20.8】 (实例 文件 ，ch20\20.8.html)。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script src="jquery.min.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function(){ 

$("button") .click(function(){ 

$(":text") .val ("冰箱 "); 

Ds; 
Ea 
</script> 
</head> 
<body> 
<p> 电 器 名 称 : <input type="text" name="user" value=" 洗 衣 机 " /></p> 
<button> 改 变 文本 域 的 值 </button> 
</body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 20-14 所 示 。 单 击 【 改 变 文本 域 的 值 】 按 钮 ， 最 


终 显 示 效 果 如 图 20-15 所 示 。 
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20.5.3 ”案例 一 一 对 元 素 的 CSS 样式 进行 操作 


通过 jQuery， 用 户 可 以 很 容易 地 对 CSS 样式 进行 操作 。 
1. 添加 CSS 类 


addClass() 方 法 主要 向 被 选 元 素 添加 一 个 或 多 个 类 。 
【 例 20.9】 (实例 文件 :ch20\20.9.html) 向 不 同 的 元 素 添加 class 属性 。 在 添加 类 时 ， 可 以 
选取 多 个 元 素 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script src="jquery.min.js"></script> 
<script> 
$ (document) .ready (function(){ 
$("button") .click(function(){ 
$ ("hil,h2,p") .addclass ("blue"); 
$ ("div") .addCclass ("important"); 
DD); 
Ds; 
</script> 
<style type="text/css"> 
.important 
{ 
font-weight:bold; 
font-size:xx-large; 
1 
.blue 
| 
color:blue; 
F 
</style> 
</head> 
<body> 
<h1> 梅 雪 </hi> 
<h2> 梅 雪 争 春 未 肯 降 </h2> 
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<p> 驭 人 阁 笔 费 评 章 </p> 

<p> 梅 须 逊 雪 三 分 白 </p> 
<qdiv> 雪 却 输 梅 一 段 香 </div> 

<br> 

<button> 向 元 素 添加 css 类 </button> 
</body> 

</html> 


上 述 代 码 在 下 9.0 浏览 器 中 的 显示 效果 20-16 所 示 。 单 击 【向 元 素 添 加 CSS 类 】 按 钮 ， 
最 终结 果 如 图 20-17 所 示 。 
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图 20-16 程序 初始 结果 图 20-17 ”程序 运行 结果 
2. 删除 CSS 类 


removeClass() 方 法 主要 用 于 从 被 选 元 素 中 删除 一 个 或 多 个 类 。 
【 例 20.10】 (实例 文件 : ch20\20.10.htmD) 删 除 元 素 的 class 属性 。 在 删除 类 时 ， 也 可 以 选 
取 多 个 元 素 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script src="jquery.min.js"></script> 
<script> 
$ (document) .ready (function(){ 
$("button") .click(function(){ 
$ ("hil,h2,p") .removeClass ("important blue"); 
Ds; 
Ds 
</script> 
<style type="text/css"> 
.important 
有 
font-weight:bold; 
font-size:xx-large; 
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color:blue; 

下 

</style> 

</head> 

<body> 

<hl class="blue"> 梅 雪 </h1> 

<h2 class="blue"> 梅 雪 争 春 未 肯 降 </h2> 
<p class="blue"> 骚 人 阁 笔 费 评 章 </p> 
<p> 雪 却 输 梅 一 段 香 </p> 

<br> 

<button> 从 元 素 上 删除 css 类 </button> 
</body> 

</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 20-18 所 示 。 单 击 【 从 元 素 上 删除 CSS 类 】 按 
钮 ， 最 终 显 示 效果 如 图 20-19 所 示 。 


Diyuandaima 入 P -6 XDN\.. ODA. Bo. 司 Daywandaims 对 -CX 
PO A A ON 文件 台地 日、 埋 看 WV 收 训 交工 具 (可 有 [H) 

9 梅 当 

梅 雪 争 春 未 肯 降 
梅 雪 争 春 未 肯 降 骚人 阁 笔 费 评 章 
颖 人 阅 笔 费 评 章 当 却 和 输 梅 一 段 香 
雪 却 输 梅 一 段 香 
[Re 
EC 
图 20-18 程序 初始 结果 图 20-19 ”程序 运行 结果 


20.6 jQuery 的 事件 处 理 


脚本 语言 一 旦 有 了 事件 就 有 了 “灵魂 ”。 事 件 对 于 脚本 语言 之 所 以 很 重要 ， 是 因为 事件 
使 页 面具 有 了 动态 性 和 响应 性 ， 如 果 没 有 事件 将 很 难 完成 页 面 与 用 户 之 间 的 交互 。 


20.6.1 案例 一 一 页 面 加 载 响应 事件 


jQuery 中 的 $.ready0 事 件 是 页 面 加 载 响 应 事件 ，ready0 方 法 是 jQuery 事件 模块 中 最 重要 
的 一 个 方法 。 该 方法 可 被 看 作 是 对 window.onload 注册 事件 的 蔡 代 方法 ， 通 过 使 用 该 方法 可 以 
在 DOM 载 入 就 绪 时 立刻 调用 所 绑 定 的 函数 ， 而 几乎 所 有 的 javaScript 函数 都 需要 在 那 一 刻 执 
行 。ready0 方 法 仅 能 用 于 当前 文档 ， 因 此 无 须 选 择 器 。 

ready0 方 法 的 语法 格式 有 以 下 3 种 : 


语法 1: $ (document) .ready (function) 


‘1@ 
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语法 2: $1() .ready (function) 
语法 3: $ (function) 


其 中 参数 function 是 必 选 项 ， 规 定 当 文档 加 载 后 要 运行 的 函数 。 
【 例 20.11】 (实例 文件 ,ch20\20.11.htmD)。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function(){ 
Su" bEtnl cLlick(Eunction(y{ 
$("p") .slideToggle(); 
区 
1); 
</script> 
</head> 
<body> 
<Pp> 此 去 经 年 ， 应 是 良辰 好 景 虚设 。 便 纵 有 千 种 风情 ， 更 与 何人 说 ? </p> 
<button class="btn1"> 隐 藏 </button> 
</body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 20-20 所 示 。 单 击 【隐藏 】 按 钮 ， 最 终 显示 效果 
如 图 20-21 所 示 。 从 中 可 以 看 出 在 文档 加 载 后 函数 也 被 激活 了 。 
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图 20-20 程序 初始 结果 图 20-21 程序 运行 结果 


20.6.2 ”案例 一 一 事件 捕获 与 事件 冒 ; 


在 某 个 对 象 上 触发 某 类 事件 (比如 单 击 )， 如 果 该 对 象 定义 了 这 个 事件 的 处 理 程序 ， 那 么 这 
个 事件 就 会 调用 处 理 程序 ， 如 果 该 对 象 没有 定义 这 个 事件 处 理 程序 或 者 事件 返回 true， 那 么 
这 个 事件 就 会 向 以 对 象 的 父 级 对 象 传播 ， 从 里 到 外 ， 直 至 它 被 处 理 ( 父 级 对 象 所 有 同类 事件 都 
将 被 激活 )， 或 者 它 到 达 了 对 象 层 次 的 最 顶层 ， 即 document 对 象 (有 些 浏 览 器 是 window)。 

【 例 20.12】 (实例 文件 :ch20\20.12.htmD)。 代 码 如 下 : 


<!1DOCTYPE html> 
<html> 
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<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 
function add(Text){ 

Var Div = document .getElementById ("display"); 

Div.innerHTML += Text; // 输 出 点 击 顺 序 
A 
</script> 
</head> 
<body onclick="add(' 第 三 层 事件 <br>');"> 

<div onclick="add(' 第 二 层 事件 <br>');"> 

<p onclick="add(' 第 一 层 事 件 <pr>');"> 事 件 冒 泡 </p> 

</div> 

<div id="display"></div> 
</body> 
</html> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 20-22 所 示 。 单 击 【 事 件 冒 泡 】 文 字 ， 最 终 显示 
效果 如 图 20-23 所 示 。 代 码 为 p、div、body 都 添加 了 onclick0 方 法 ， 当 单 击 p 的 文字 时 ， 触 
发 事件 ， 并 且 触 发 顺序 是 由 最 底层 的 文字 依次 向 上 触发 。 
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图 20-22 程序 初始 结果 图 20-23 程序 运行 结果 


20.7 jQuery 的 动画 效果 


jQuery 能 在 页 面 上 实现 绚丽 的 动画 效果 ，jQuery 本 身 对 页 面 动 态 效果 提供 了 一 些 有 限 的 
支持 ， 例 如 动态 显示 和 隐藏 页 面 的 元 素 、 淡 入 淡出 动画 效果 、 滑 动 动画 效果 等 。 


20.7.1 案例 一 一 基本 的 动画 效果 

显示 与 隐藏 是 jQuery 实现 的 基本 动画 效果 。 在 jQuery 中 ， 提 供 了 两 种 显示 与 隐藏 元 素 的 
方法 ， 一 种 是 分 别 显示 和 隐藏 网 页 元 素 ， 另 一 种 是 切换 显示 与 隐藏 元 素 。 

1. 隐藏 元 素 


在 jQuery 中 ， 使 用 hide0 方 法 可 隐藏 匹配 元 素 。 在 使 用 hide() 方 法 隐藏 匹配 元 素 的 过 程 
中 ， 当 hide0 方 法 不 带 有 任何 参数 时 ， 就 实现 了 元 素 的 简单 隐藏 。 其 语法 格式 如 下 : 


外 
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hide() 


例如 ， 想 要 隐藏 页 面 当中 的 所 有 文本 元 素 ， 就 可 以 使 用 以 下 jQuery 代码 : 


$("p") .hide () 


另外 ， 带 有 参数 的 hide0 隐 藏 方式 ， 可 以 实现 不 同方 式 的 隐藏 效果 。 其 语法 格式 如 下 : 


$ (selector) .hide (speed,callback); 


上 述 参 数 含义 说 明 如 下 。 

@ ”Speed: 可 选 的 参数 ， 规 定 隐藏 的 速度 ， 可 以 取 "slow"、"fast" 或 毫秒 等 值 。 
e@ ”Callback: 可 选 的 参数 ， 规 定 隐藏 完成 后 所 执行 的 函数 名 称 。 

【 例 20.13】 (实例 文件 : ch20\20.13.htmD) 设 置 网 页 元 素 的 隐藏 参数 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<script src="jquery-1.11.0.min.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function(){ 
$(".ex .hide") .click(function(){ 
$ (this) .parents (" .ex") .hide ("3000"); 
Ds; 
hi 
</script> 
<style type="text/css"> 
div.ex 
{ 
background-color:#e5eecc; 
padding:7px; 
border:solid lpx #c3c3c3; 
. 
</style> 
</head> 
<body> 
<h3> 总 经 理 </h3> 
<div class="ex"> 
<button class="hide" type="button"> 隐 藏 </button> 
<p> 姓 名 : 张 三 <br /> 
电话 : 13512345678<br /> 
公司 地 址 : 北京 西 路 20 号 </p> 


</div> 


<h3> 办 公 室 主任 </h3> 

<div class="ex"> 

<button class="hide" type="button"> 隐 藏 </button> 
<p> 姓 名 : 李 四 <br /> 

电话 : 13012345678<br /> 

公司 地 址 : 北京 西 路 20 号 </p> 

</div> 

</body> 

</html> 


上 述 代码 运行 结果 如 图 20-24 所 示 。 单 击 页 面 中 的 【隐藏 】 按 钮 ， 即 可 将 下 方 的 联系 人 
信息 慢 慢 地 隐藏 起 来 。 


图 20-24 ”程序 运行 结果 


2. 显示 元 素 


使 用 show0 方 法 可 以 显示 匹配 的 网 页 元 素 。show0 方 法 有 两 种 语法 格式 ， 一 种 是 不 带 有 
参数 的 形式 ; 一 种 是 带 有 参数 的 形式 。 
不 带 有 参数 的 格式 ， 用 以 实现 不 带 有 任何 效果 的 显示 匹配 元 素 。 其 语法 格式 如 下 : 


show () 


例如 ， 想 要 显示 页 面 中 的 所 有 文本 元 素 ， 可 使 用 以 下 jQuery 代码 : 
$("p") .show() 


带 有 参数 的 格式 ， 用 以 实现 以 优雅 的 动画 方式 显示 网 页 中 的 元 素 ， 并 在 隐藏 完成 后 可 选 
择 地 触发 一 个 回调 函数 。 其 语法 格式 如 下 : 


$ (selector) .show (speed,callback); 


上 述 各 项 参数 的 含义 如 下 。 

@ ”Speed: 可 选 的 参数 ， 规 定 显示 的 速度 ， 可 以 取 "slow"、"fast" 或 毫秒 等 参数 。 
@ ”Callback: 可 选 的 参数 ， 规 定 显示 完成 后 所 执行 的 函数 名 称 。 

例如 ， 想 要 在 300 毫秒 内 显示 网 页 中 的 p 元 素 ， 可 使 用 以 下 jQuery 代码 : 
$("p") .show(300) 


【 例 20.14】 (实例 文件 ，ch20\20.14.htmD) 在 3000 毫秒 内 显示 或 隐藏 网 页 中 的 元 素 。 代 码 
如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<script src="jquery-1.11.0.min.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function(){ 
$("#hide") .click (function(){ 
$("p") .hide("3000"); 
Ds 
$("#show") .click (function(){ 
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$l"p"h show("3000")z> 

Ds; 
1); 
</script> 
</head> 
<body> 
<p ig="p1"> 点 击 【隐藏 】 按 钮 ， 本 段 文 字 就 会 消失 ， 点 击 【 显 示 】 按 钮 ， 本 段 文字 就 会 显示 。</p> 
<button id="hide" type="button"> 隐 藏 </button> 
<button id="show" type="button"> 显 示 </button> 
</body> 
</html> 


运行 上 述 代码 ， 结 果 如 图 20-25 所 示 。 单 击 页 面 中 的 【隐藏 】 按 钮 ， 就 会 将 网 页 中 文字 


在 3000 毫秒 内 慢 慢 隐 藏 起 来 ， 然 后 单 击 【 显 示 】 按 钮 ， 隐 藏 起 来 的 文字 又 会 在 3000 毫秒 内 


慢 慢 地 显示 出 来 。 
眉 ] Huserswdr @ PP OX | BHUser MAdministrator\.. < 
。 冯 件 (、 蝙 纺 E) 下 看 (V) 收藏 穴 (A) 工具 MT 大助 (H) 
点 击 【 隐 藏 】 按钮 ， 本 段 文字 就 人 消失， 点击 【显示 按钮， 本 段 文字 就 会 显示 。 
图 20-25 ”程序 运行 结果 
3. 切换 元 素 


这 


使 用 toggle( 方 法 可 以 切换 元 素 的 可 见 (显示 与 隐藏 状态。 简单 地 讲 ， 当 元 素 为 显示 状态 
使 用 toggle() 方 法 可 以 将 其 隐藏 起 来 ， 反之 ， 可 以 将 其 显示 出 来 。 
toggle( 方 法 的 语法 格式 如 下 : 


$ (selector) .toggle (speed, callback) 


其 中 各 参数 的 含义 如 下 。 

@ ”Speed: 可 选 的 参数 ， 规 定 隐 藏 /显示 的 速度 ， 可 以 取 “"slow"”、“"fast"” 或 毫秒 等 
参数 。 

@ ”Callback: 可 选 的 参数 ， 是 toggle0 方 法 完成 后 所 执行 的 函数 名 称 。 

【 例 20.15】 (实例 文件 ，ch20W20.15.html) 切 换 (隐藏 /显示 ) 网 页 中 的 元 素 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<script src="jquery-1.11.0.min.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function(){ 
$ ("button") .click(function(){ 
$("p").toggle(); 
DD); 
</script> 


</head> 

<body> 

<button type="button"> 切 换 </button> 
<p> 清 明 时 节 雨 纷纷 ，</p> 

<p> 路 上 行人 欲 断 瑰 。</p> 

</body> 

</html> 


运行 上 述 代码 ， 结 果 如 图 20-26 所 示 。 单 击 页 面 中 的 【切换 】 按 钮 ， 可 以 实现 网 页 文字 
段落 的 显示 与 隐藏 的 切换 效果 。 
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图 20-26 程序 运行 结果 
20.7.2 ”案例 一 一 动画 的 淡 入 和 淡出 效果 


通过 jQuery 可 以 实现 元 素 的 淡 入 和 淡出 的 动画 效果 ， 主 要 方法 有 fadeIn0、fadeOut()、 
fadeToggle()、fadeTo()。 


1. 淡出 隐藏 元 素 
fadeIn0 方 法 通过 增 大 不 透明 度 实现 匹配 元 素 的 淡出 效果 。 其 语法 格式 如 下 : 


$ (selector) .fadeIn (speed,callback); 


其 中 ， 各 参数 说 明 如 下 。 

@ ”Speed: 可 选 的 参数 ， 规 定 淡出 效果 的 时 长 ， 可 以 取 “"slow"”、“"fast"” 或 毫秒 等 值 。 
@ ”Callback: 可 选 的 参数 ， 是 fadeIn() 方 法 完成 后 所 执行 的 函数 名 称 。 

【 例 20.16】 (实例 文件 ，ch20\20.16.html) 以 不 同 效 果 淡 出 网 页 中 的 矩形 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<script src="jquery-1.11.0.min.js"></script> 
<script> 
$ (document) .ready (function(){ 
$("button") .click(function(){ 
$("#divi") .fadeIn(); 
$("#div2") .fadeIn ("slow"); 
$("#div3") .fadeIn (3000); 
1D); 
和 
</script> 
</head> 
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<body> 

<p> 以 不 同 参数 方式 淡出 网 页 元 素 </p> 

<button> 单 击 按钮 ， 使 矩形 以 不 同 的 方式 淡出 </button> 

<br><br> 

<div id="divl" style="width:80px;height:80px;display:none;background-— 
color:red;"></div> 

<br> 

<div id="div2" style="width:80px;height:80px;display:none;background-— 
color:green;"></div> 

<br> 

<div id="div3" style="width:80px;height:80px;display:none;background-— 
color:blue;"></div> 

</body> 

</html> 


上 述 代 码 运行 ， 结 果 如 图 20-27 所 示 。 单 击 页 面 中 的 按钮 图 祁 
形 就 会 以 不 同 的 方式 淡出 显示 。 
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图 20-27 ”程序 运行 结果 
2. 淡 入 可 见 元 素 
fadeOut0 方 法 通过 减 小 不 透明 度 实现 匹配 元 素 的 淡 入 效果 。 其 语法 格式 如 下 : 


$ (selector) .fadeOut (speed,callback); 


其 中 ， 各 参数 说 明 如 下 。 

@。 Speed: 可 选 的 参数 ， 规 定 淡 入 效果 的 时 长 ， 可 以 取 “"slow"”、“"fast"” 或 毫秒 
等 值 。 

@ ”Callback: 可 选 的 参数 ， 是 fadeOut0 方 法 完成 后 所 执行 的 函数 名 称 。 

【 例 20.17】 (实例 文件 :ch20\20.17.htmD) 以 不 同 效果 淡 入 网 页 中 的 矩形 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<script src="jquery-1.11.0.min.js"></script> 
<script type="text/javascript"> 

$ (document) .ready (function(){ 
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$("button") .click(function(){ 

$("#divi") .fadeOut (); 

$("#div2") .fadeOut ("slow"); 

$("#div3") .fadeOut (3000); 

1D); 

5 
</script> 
</head> 
<body> 
<p> 以 不 同 参数 方式 淡 入 网 页 元 素 </p> 
<button> 单 击 按钮 ， 使 矩形 以 不 同 的 方式 淡 入 </button> 
<br><br> 
<div id="divl" style="width:80px;height:80px;background-color:red;"></div> 
<br> 
<div id="div2" style="width:80px;height:80px;background-— 
color:green;"></div> 
<br> 
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div> 
</body> 
</html> 


运行 上 述 代码 ， 结 果 如 图 20-28 所 示 。 单 击 页 面 中 的 按钮 [ER 
矩形 就 会 以 不 同 的 方式 淡 入 。 
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图 20-28 程序 运行 结果 

3. 切换 淡 入 和 淡出 元 素 

fadeToggle0 方 法 可 以 在 fadeIn0 与 fadeOut0 方 法 之 间 进行 切换 。 也 就 是 说 ， 如 果 元 素 已 
淡出 ， 则 fadeToggleO 会 向 元 素 添 加 淡 入 效果 ; 如果 元 素 已 淡 入 ， 则 fadeToggle0 会 向 元 素 添 
加 淡出 效果 。 

fadeToggle() 方 法 的 语法 格式 如 下 : 

$ (selector) .fadeToggle (speed,callback); 

其 中 ， 各 参数 说 明 如 下 。 

@ ”Speed: 可 选 的 参数 ， 规 定 淡 入 淡出 效果 的 时 长 ， 可 以 取 “"slow"”、“"fast"” 或 毫 

秒 等 值 。 
@ ”Callback: 可 选 的 参数 ， 是 fadeToggle0 方 法 完成 后 所 执行 的 函数 名 称 。 
【 例 20.18】 (实例 文件 ，ch20\20.18.htmD) 实 现 网 页 元 素 的 淡出 淡 入 效果 。 代 码 如 下 : 


<!DOCTYPE html> 
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<html> 
<head> 
<script src="jquery-1.11.0.min.js"></script> 
<script> 
$ (document) .ready (function(){ 
$ ("button") .click(function(){ 

$("#divi") .fadeToggle (); 

$("#div2") .fadeToggle ("slow"); 

$("#div3") .fadeToggle (3000); 

]) 7 

3 
</script> 
</head> 
<body> 
<p> 以 不 同 参数 方式 淡 入 淡出 网 页 元 素 </p> 
<button> 单 击 按钮 ， 使 矩形 以 不 同 的 方式 淡 入 淡出 </button> 
<br><br> 
<div id="divl" style="width:80px;height:80px;background-color:red;"></div> 
<br> 
<div id="div2" style="width:80px;height:80px;background-— 
color:green;"></div> 
<br> 
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div> 
</body> 
</body> 
</html> 


运行 上 述 代码 ， 结 果 如 图 20-29 所 示 。 单 击 页 面 中 的 按钮 邑 
形 就 会 以 不 同 的 方式 淡 入 淡出 。 
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图 20-29 程序 运行 结果 
3. 淡 入 或 淡出 元 素 至 指定 数值 


使 用 fadeTo() 方 法 可 以 将 网 页 元 素 淡 入 或 淡出 至 指定 数值 。fadeTo() 方 法 的 语法 格式 
如 下 : 


$ (selector) .fadeTo (speed, opacity,callback); 


其 中 ， 各 参数 说 明 如 下 。 
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@ ”Speed: 可 选 的 参数 ， 规 定 淡 入 淡出 效果 的 时 长 ， 可 以 取 “"slow"”、“"fast"” 或 毫 


秒 等 值 。 
e@ Opacity: 必需 的 参数 ， 参 数 将 淡 入 淡出 效果 设置 为 给 定 的 不 透明 度 ( 值 介 于 0 与 1 之 
间 )。 


e@ ”Callback: 可 选 的 参数 ， 是 该 函数 完成 后 所 执行 的 函数 名 称 。 
【 例 20.19】 (实例 文件 : ch20\20.19.htmD 实 现 网 页 元 素 的 淡出 淡 入 至 指定 数值 。 代 码 
如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<script src="jquery-1.11.0.min.js"></script> 

<script> 

$ (document) .ready (function(){ 

$("button") .click(function(){ 
$("#divi") .fadeTo ("slow",0.15); 
$("#div2") .fadeTo ("slow",0.4); 
$("#div3") .fadeTo ("slow",0.7); 
]) 7 

1); 

</script> 

</head> 

<body> 

<p> 以 不 同 参数 方式 淡 入 网 页 元 素 </p> 

<button> 单 击 按钮 ， 使 矩形 以 不 同 的 方式 淡 入 至 指定 参数 </button> 

<br><br> 

<div id="divl" style="width:80px;height:80px;background-color:red;"></div> 

<br> 

<div id="div2" style="width:80px;height:80px;background- 

color:green;"></div> 

<br> 

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div> 

</body> 

</html> 


运行 上 述 代码 ， 结 果 如 图 20-30 所 示 。 单 击 页 面 中 的 按 多 omen 
和 矩形 就 会 以 不 同 的 方式 淡 入 淡出 至 指定 参数 值 。 


enD 广 一 册 中 沸 窜 玫 1duoSeAer_ 贡 0Z 中 鳃 


ED ， | 网 页 中 的 


BD es 3 -cxjawwevennero “| 
RP Sh SBM CRXR TR me 


以 下 同 郑 数 方式 沈 入 网 页 元 系 
EE 7 


一 | 


20-30 ”程序 运行 结果 、 z 


令 442 


JavaScript 动 态 网 站 开发 
案例 课 党 %… 


20.7.3 ”案例 一 一 滑动 效果 


通过 jQuery 可 以 在 元 素 上 创建 滑动 效果 。jQuery 中 用 于 创建 滑动 效果 的 方法 有 
slideDownO、slideUpO、slideToggleO。 


1. slideDown() 方 法 


使 用 slideDown0 方 法 可 以 向 下 增加 元 素 高 度 动态 显示 匹配 的 元 素 。slideDown0 方 法 会 逐 
渐 向 下 增加 匹配 的 隐藏 元 素 的 高 度 ， 直 到 元 素 被 完全 显示 为 止 。slideDown() 方 法 的 语法 格式 
如 下 : 


$ (selector) .slideDown (speed,callback) 


其 中 ， 各 参数 说 明 如 下 。 

@ ”Speed: 可 选 的 参数 ， 规 定 效果 的 时 长 ， 可 以 取 "slow"、"fast" 或 毫秒 等 值 。 
e@ ”Callback: 可 选 的 参数 ， 是 滑动 完成 后 所 执行 的 函数 名 称 。 

【 例 20.20】 (实例 文件 ，ch20\20.20.html) 滑 动 显示 网 页 元 素 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<script src="jquery-1.11.0.min.js"></script> 

<script type="text/javascript"> 

$ (document) .ready (function(){ 
$(".£flip") .click (function(){ 

$(".panel") .slideDown ("slow"); 

Ds; 

3 

</script> 

<style type="text/css"> 

div.panel,p.flip 

. 

margin:0px; 

padding:S5px; 

text-align:center; 

background:#e5eecc7 

border:solid lpx #c3c3c3; 

} 

div.panel 

{ 

height:120px; 

display:none; 

a 

</style> 

</head> 

<body> 

<div class="panel"> 

<p> 小 荷 才 露 尖 尖 角 ，</p> 

<p> 早 有 晴 晓 立 上 头 。</P> 

</div> 

<p class="flip"> 请 点 击 这 里 </p> 


</body> 
</html> 


运行 上 述 代码 ， 结 果 如 图 20-31 所 示 。 单 击 页 面 中 的 “请 点 击 这 里 ”， 网 页 中 隐藏 的 元 
素 就 会 以 滑动 的 方式 显示 出 来 。 
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图 20-31 程序 运行 结果 


2. slideUp() 方 法 


使 用 slideUpO 方 法 可 以 向 上 减少 元 素 高 度 动态 显示 匹配 的 元 素 。slideUp() 方 法 会 逐渐 向 
上 减少 匹配 的 显示 元 素 的 高 度 ， 直 到 元 素 完全 隐藏 为 止 。slideUp0 方 法 的 语法 格式 如 下 : 


$ (selector) .slideUp (speed,callback); 


参数 说 明 如 下 : 

@ ”Speed: 可 选 的 参数 ， 规 定 效果 的 时 长 ， 可 以 取 “"slow"”、“"fast"” 或 毫秒 等 值 。 
@ ”Callback: 可 选 的 参数 ， 是 滑动 完成 后 所 执行 的 函数 名 称 。 

【 例 20.21】 (实例 文件 :ch20\20.21.html) 滑 动 隐 藏 网 页 元 素 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<script src="jquery-1.11.0.min.js"></script> 

<script type="text/javascript"> 

$ (document) .ready (function(){ 
$(".£flip") .click (function(){ 

$(".panel") .slideUp ("slow"); 

Ds; 

Je 

</script> 

<style type="text/css"> 

div.panel,p.flip 

{ 

margin:0px; 

padding:5px; 

text-align:center; 

background:#e5eecc; 

border:solid lpx #c3c3c3; 
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div.panel 

,| 

height:120px; 

上 

</style> 

</head> 

<body> 

<div class="panel"> 
<p> 小 荷 才 露 尖 尖 角 ，</p> 
<p> 早 有 晴 星 立 上 头 。</p> 
</div> 

<p class="flip"> 请 点 击 这 里 </p> 
</body> 

</html> 


运行 上 述 代码 结果 ， 如 图 20-32 所 示 。 单 击 页 面 中 的 “请 点 击 这 里 ”， 网 页 中 显示 的 元 
素 就 会 以 滑动 的 方式 隐藏 起 来 。 
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图 20-32 程序 运行 结果 
3. slideToggle() 方 法 


通过 slideToggle( 方 法 可 以 实现 通过 高 度 的 变化 动态 切换 元 素 的 可 见 性 。 也 就 是 说 ， 如 果 
元 素 是 可 见 的 ， 那 么 通过 减少 高 度 就 可 以 使 元 素 全 部 隐藏 如果 元 素 是 隐藏 的 ， 那 么 通过 增 
加 高 度 就 可 以 使 元 素 最 终 全 部 可 见 。 

slideToggle0 方 法 的 语法 格式 如 下 : 


$(selector) .slideToggle (speed,callback); 


其 中 ， 各 参数 说 明 如 下 。 

@ ”Speed: 可 选 的 参数 ， 规 定 效果 的 时 长 ， 可 以 取 “"slow"”、“"fast"” 或 毫秒 等 值 。 

@ ”Callback: 可 选 的 参数 ， 是 滑动 完成 后 所 执行 的 函数 名 称 。 

【 例 20.22】 (实例 文件 : ch20\20.22.html) 通 过 高 度 的 变化 动态 地 切换 网 页 元 素 的 可 见 
性 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<script src="jquery-1.11.0.min.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function(){ 

$i(™". FLip") .click(function(){ 

$(".panel"). slideToggle ("slow"); 
DD); 


a 


</script> 

<style type="text/css"> 
div.panel,p.flip 

. 

margin:0px; 

padding:S5px; 
text-align:center; 
background:#e5eecc7 
border:solid lpx #c3c3c3; 
和 


div.panel 


' 

height:120px; 
display:none; 

} 

</style> 

</head> 

<body> 

<div class="panel"> 
<p> 小 荷 才 露 尖 尖 角 ，</p> 
<p> 早 有 晴 星 立 上 头 。</p> 
</div> 

<p class="flip"> 请 点 击 这 里 </p> 
</body> 

</html> 


运行 上 述 代码 ， 结 果 如 图 20-33 所 示 。 单 击 页 面 中 的 “请 点 击 这 里 ”， 网 页 中 显示 的 元 
素 就 可 以 在 显示 与 隐藏 之 间 进 行 切换 。 
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20.7.4 ”案例 一 一 自 定义 的 动画 效果 


使 用 animate0 方 法 创建 自 定义 动画 的 方法 更 加 自由 ， 可 以 随意 地 控制 元 素 的 元 素 ， 实 现 
更 为 绚丽 的 动画 效果 。animate() 方 法 的 语法 格式 如 下 : 
$ (selector) .animate ({params},speed,callback); 


其 中 ， 各 参数 说 明 如 下 。 
e ”Params: 必需 的 参数 ， 定 义 形成 动画 的 CSS 属性 。 

e@ ”Speed: 可 选 的 参数 ， 规 定 效果 的 时 长 ， 可 以 取 “"slow"”、“"fast"” 或 毫秒 等 值 。 | 
e。 ”Callback: 可 选 的 参数 ， 是 动画 完成 后 所 执行 的 函数 名 称 。 
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Se 默认 情况 下 ， 所 有 HTML 元 素 都 有 一 个 静态 位 置 ， 且 无 法 移动 。 如 果 需 要 对 
以 位 置 进行 操作 ， 就 要 先 把 元 素 的 CSS position 属性 设置 为 relative、fixed 或 


“absolute! ”。 


【 例 20.23】 (实例 文件 ，ch20\20.23.html) 创 建 自 定义 动画 效果 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<script src="jquery-1.11.0.min.js"></script> 
<script> 
$ (document) .ready (function(){ 
$("button") .click(function(){ 
var div=$ ("div"); 
div.animate({left:'100px'},"slow"); 
div.animate({fontSize:'3em'},"slow"); 


</script> 

</head> 

<body> 

<button> 开 始 动画 </button> 

<div 
style="background:#98bf21;height:100px;width:200px;position:absolute;">HELL 
O</div> 

</body> 

</html> 


运行 上 述 代码 ， 结 果 如 图 20-34 所 示 。 单 击 页 面 中 的 【开始 动画 】 按 钮 ， 网 页 中 显示 的 
元 素 就 会 以 设 定 的 动画 效果 运行 。 
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20.8 ”实战 演练 一 一 制作 绚丽 的 多 级 动画 菜单 


本 节 主 要 讲述 制作 绚丽 的 多 级 动画 菜单 。 要 求 鼠标 经 过 菜单 区 域 时 以 动画 式 展开 下 拉 菜 
单 ， 动 态 效果 要 生动 活泼 。 具 体操 作 的 步骤 如 下 。 
EC 设计 基本 的 网 页 框架 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 


G6 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
</head> 

<body> 

<div class="box"> 

<ul id="veryhuo menu" class="veryhuo menu"> 
< 

<span> 淘 宝 特色 服务 </span><!-- Increases to 510px in width--> 
<div class="ldd submenu"> 

<ul> 

<li class="1ldd heading"> 主 题 市 场 </1i> 
<1i><a href="#"> 运 动 派 </a></1i> 
<1li><a href="#"> 情 侣 </a></1i> 

<li><a href="#"> 家 具 </a></1i> 

<1i><a href="#"> 美 食 </a></1i> 

<1i><a href="#"> 有 车 族 </a></1i> 
</ul> 

<ul> 

<li class="1dd heading"> 特 色 购物 </1i> 
<1i><a href="#"> 全 球 购 </a></1i> 
<li><a href="#"> 淘 女郎 </a></1i> 
<1i><a href="#"> 挑 食 </a></1i> 

<li><a href="#"> 搭 配 </a></1i> 

<1i><a href="#"> 同 城 便民 </a></1i> 
<l1i><a href="#"> 淘 宝 同学 </a></1i> 
</ul> 

<ul> 

<li class="ldd heading"> 优 惠 促 销 </1i> 
<1i><a href="#"> 天 天 特价 </a></1i> 
<1i><a href="#"> 免 费 试用 </a></1i> 
<1i><a href="#"> 清 仓 </a></1i> 

<1i><a href="#"> 一 元 起 拍 </a></1i> 
<1i><a href="#"> 淘 金币 </a></1i> 
<1i><a href="#t"> 聚 划算 </a></1i> 
</ul> 

</div> 

</body> 

</html> 


国运 行 上 述 代 码 ， 效 果 如 图 20-35 所 示 。 
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为 各 级 菜单 添加 CSS 样式 风格 ， 代 码 如 下 : 


<style> 
全 
padding:0; 
margin:0; 
于 
body{ 
background:#f£f0f0f0; 
font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif; 
overflow-x:hidden; 
3 
span.referencel{ 
position:fixed; 
left:10px; 
bottom:10px; 
font-size:11PX7 
} 
span.reference af 
color:#DF7B61; 
text-decoration:none; 
text-transform: uppercase; 
text-shadow:0 lpx 0 #fff; 
SS } 

\ span.reference a:hover{ 
color:#000; 
3 
.box{ 
margin-top:129px; 
height:460px; 
width:100%; 
position:relative; 
background:#fff url(/uploads/allimg/1202/veryhuo click.png) no-repeat 380px 
180px; 
—moz-box-shadow:0px Opx l0px #aaa; 
—webkit-box-shadow:0px Opx l10px #aaa; 
-box-shadow:0px Opx l10px #aaa; 
.box h21{ 
color:#f0f0f0; 
padding:40px 10px; 
text-shadow:lpx lpx lpx #ccc; 
ul.veryhuo menu{ 
margin:0Opx; 
padding:0; 
display:block; 
height:50px; 
background-color:#D04528; 
list-style:none; 
font-family:"Trebuchet MS", sans-serif; 
border-top:lpx solid #EF593B; 
border-bottom:1lpx solid #EF593B; 
border-left:10px solid #D04528; 


U 


—moz-box-shadow:0px 3px 4px #591E12; 

一 webkit-box-shadow:0px 3px 4px #591E127 
-box-shadow:0px 3px 4px #591E127 
ul.veryhuo menu af 
text-decoration:none; 

} 

ul.veryhuo menu > 1i{ 

float:left; 

position:relative; 

} 

ul.veryhuo menu > 1i > span{ 
float:left; 

Color:#fff; 

background-color:#D04528; 

height:50px; 

line-height:50px; 

cursor:default; 

padding:0px 20px; 

text-shadow:O0px Opx lpx #fff; 
border-right:lpx solid #DF7B61; 
border-left:lpx solid #C44D377 

下 

ul.veryhuo menu .ldd submenu{ 
position:absolute; 

top:50px; 

width:550px; 

display:none; 

opacity:0.95; 

left :Opx; 

font-size:10px; 

background: #C34328; 

border-top:lpx solid #EF593B; 
-moz-box-shadow:0px 3px 4px #591E12 inset7 
—webkit-box-shadow:0px 3px 4px #591E12 inset; 
-box-shadow:0px 3px 4px #591E12 inset; 
于 

a.ldd subfoot{ 
background-color:#f0f0f0; 

color:#444; 

display:block; 

clear:both; 

padding:15px 20px; 
text-transform:uppercase; 

font-family: Arial, serif; 
font-size:12px; 

text-shadow:0px Opx lpx #fff; 
-moz-box-shadow:0px Opx 2px #777 inset; 
—webkit-box-shadow:0px Opx 2px #777 inset; 
-box-shadow:0px Opx 2px #777 inset; 

} 

ul.veryhuo menu ul{ 

list-style:none; 

float:left; 
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border-left:1px solid #DEF7B617 
margin:20px Opx 10Ppx 30px; 
padding:10px; 

li.ldd heading{ 

font-family: Georgia, serif; 
font-size: 13px; 

font-style: italic; 
Color:#FFB39F; 

text-shadow:0px Opx lpx #B03E23; 
padding:0px Opx 10px Opx; 

} 

ul.veryhuo menu ul li af 
font-family: Arial, serif; 
font-size:10px; 
line-height:20px; 

color:#fff; 

padding:1lpx 3px; 

3 

ul.veryhuo menu ul li a:hovert{ 
—moz-box-shadow:0px Opx 2px #333; 
—webkit-box-shadow:0px Opx 2px #333; 
box-shadow:0px Opx 2px #333; 
background:#AF412B; 

} 


</style> 
EEC 添加 实现 多 级 动态 菜单 的 代码 ， 确 保 子 菜单 随 需求 或 隐藏 或 显现 。 代 码 如 下 : 
<!-- The JavaScript --> 


<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 

$(function() { 

Var $menu = $('#veryhuo menu'); 
$menu.children('1i') .each (function(){ 

Var $this = $(this); 

Var $span = $this.children('span'); 
$span.data('width',s$span.width ()); 
$this.bind('mouseenter',function(){ 

$menu.find('.ldd submenu') .stop(true,true) .hide(); 
$span.stop() .animate ({'width':'510px'},300,function(){ 
s$this.find('.ldd submenu') .slideDown (300); 

Ds; 

}) .bind('mouseleave', function(){ 

s$this.find('.ldd submenu') .stop (truevtrue) .hide(); 
$span.stop() .animate ({'width':$span.data('width')+'px'},300); 


</script> 


运行 最 终 的 代码 ， 效 果 如 图 20-36 所 示 。 
EDUD 将 鼠标 放 在 【淘宝 特色 服务 】 链 接 文字 上 ， 将 动态 显示 多 级 菜单 ， 效 果 如 图 20-37 
所 示 。 
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图 20-36 ”程序 运行 效果 图 20-37 ”程序 运行 效果 


20.9” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: jQuery 选择 器 的 使 用 。 

练习 2: jQuery 控制 页 面 的 应 用 。 
练习 3: jQuery 事件 处 理 的 应 用 。 
练习 4: jQuery 动画 效果 的 应 用 。 


20.10 高 手 甜 点 


甜点 1: 使 用 animate(0) 方 法 时 没有 动画 效果 怎么 办 ? 

在 使 用 animate0 方 法 时 ， 必 须 设置 元 素 的 定位 属性 position 为 relative 或 absolute， 如 果 
没有 明确 定义 元 素 的 定位 属性 ， 那 么 元 素 就 实现 不 了 动画 效果 。 

甜点 2: mouseover 和 mouseenter 的 区 别 是 什么 ? 

在 jQuery 中 ，mouserover() 和 mouseenter 都 在 鼠标 进入 元 素 时 触发 ， 它 们 区 别 如 下 。 

(1) 如 果 元 素 内 置 有 子 元 素 ， 不 论 鼠 标 指针 穿 过 被 选 元 素 或 其 子 元 素 ， 都 会 触发 
mouseover 事件 。 而 只 有 鼠标 指针 在 穿 过 被 选 元 素 时 ， 才 会 触发 mouseenter 事件 ， 
mouseenter 子 元 素 不 会 反复 触发 事件 ， 否 则 在 正 浏览 器 中 会 出 现 闪烁 情况 。 

(2) 在 没有 子 元 素 时 ，mouserover0 和 mouseenter0 事 件 结果 一 致 。 


‘1@ 


“> 
NE 


攻 
S 


2 
3 


, 
0 


S 
> 


( 
\ 


SD 


2 
站 


区 


人 


3 
3R 


全 性 。 


3 


站 。 JavaScript 动 态 网 站 开发 
0 案例 课堂 由 … 


21.1 案例 一 一 设置 |E 浏览 器 的 安全 区 域 


控制 脚本 的 安全 策略 ， 如 果 设 置 得 太 严格 ， 将 会 失去 脚本 的 部 分 功能 ， 如 果 设 置 得 太 宽 
松 ， 将 会 失去 安全 性 。 为 了 在 下 浏览 器 中 灵活 运用 脚本 ， 可 对 其 安全 区 域 进行 设置 。 
设置 正 浏览 器 安全 区 域 的 操作 步骤 如 下 。 
EEC 打开 卫 浏 览 器 ， 选 择 【 工 具 】|【Intermet 选项 】 菜 单 命令 ， 如 图 21-1 所 示 。 
EEJD2p 打开 【Intemet 选项 】 对 话 框 ， 单 击 【 删 除 】 按 钮 ， 可 以 删除 临时 文件 、 历 史记 
录 、Cookie、 保 存 的 密码 和 网 页 表单 信息 ， 提 高 系统 的 安全 性 ， 如 图 21-2 所 示 。 
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图 21-1 IE 浏览 器 窗口 图 21-2 【iInternet 选 项】 对 话 框 


EEC 选择 【安全 】 选 项 卡 ， 在 打开 的 设置 界面 中 选择 【Internet】 选 项 ， 并 在 下 方 的 
设置 界面 总 设置 该 区 域 的 安全 级 别 ， 默 认 安全 级 别 是 “中 ”， 如 图 21-3 所 示 。 


本 ZY 选择 【 木 地 Intemet】 选 项 ， 在 该 区 域 包括 所 有 本 地 服务 器 上 的 网 站 ， 上 默认 安全 
级 别 为 中 低 ， 如 图 21-4 所 示 。 
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EECUD) 选择 【受信 任 的 站 点 】 选 项 ， 该 区 域 包含 用 户 认为 安全 的 网 站 。 默 认 情况 下 ， 
没有 任何 网 站 被 分 配 到 “受信 任 的 站 点 ”区 域 ， 其 安全 级 别 设置 为 “ 低 ”， 如 图 21-5 
所 示 。 

EC 选择 【 受 限 制 的 网 站 】 选 项 ， 该 区 域 包含 用 户 不 信任 的 网 站 。 默 认 情 况 下 ， 没 
有 任何 网 站 被 分 配 到 “ 受 限 制 的 站 点 ”区 域 ， 其 安全 级 别 设置 为 “高 ”， 如 图 21-6 
所 示 。 
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图 21-5 【受信 任 的 站 点 】 设 置 界面 图 21-6 【 受 限 制 的 网 站 】 设 置 界面 


21.2 ” JavaScript 代码 安全 


使 用 JavaScript 的 部 分 属性 和 方法 可 以 在 进行 程序 开发 时 ， 提 高 代码 的 安全 性 。 在 编写 代 
码 时 ， 也 有 可 能 是 由 于 朴 忽 编写 出 浪费 系统 资源 的 恶意 代码 ， 造 成 浏览 器 月 溃 或 者 死机 。 下 
面 就 来 介绍 一 下 提高 JavaScript 代码 安全 的 方法 。 


21.2.1 案例 一 一 屏蔽 部 分 按键 


在 浏览 网 页 时 ， 有 些 网 页 的 特殊 页 面 不 允许 用 户 进行 刷新 屏幕 、 后 退 或 新 建文 档 等 操 
作 。 这 一 功能 是 通过 屏蔽 键盘 的 回 车 键 、 退 格 键 、F5 键 、Ctrl+N 组 合 键 、ShifttF10 组 合 键 来 
实现 的 。 

屏蔽 部 分 按键 应 用 的 是 JavaScript 脚本 中 的 Event 对 象 的 相关 属性 。 其 中 keyCode 属性 表 
示 按 键 的 数字 代号 。keyCode 属性 值 如 表 21-1 所 示 。 
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表 21-1 keyCode 属性 值 


值 说 明 
8 退 格 键 
13 | 回 车 键 
116 F5 刷新 键 
37 Altt+ 方 向 键 一 或 方向 键 一 
芝 | cuttN 组 台 键 新 建 正 窗口 
121 Shift+F10 组 合 键 
【 例 21.1】 (实例 文件 ， ch21\21.1.htmD) 屏 蔽 部 分 按键 。 代 码 如 下 : 
<!DOCTYPE> 
<html> 
<head> 


<title> 屏 蔽 部 分 按键 </title> 
<script language=javascript> 
function keydown(){ 
if(event .keyCcode==8) 1{ 
event .keyCode=0; 
event .returnValue=false; 
alert ("当前 设置 不 允许 使 用 退 格 键 ") ; 
}if (event.keyCode==13){ 
event .keyCode=0; 
event .returnValue=false; 
alert ("当前 设置 不 允许 使 用 回 车 键 ") ; 
}if (event.keyCode==116){ 
event .keyCode=0; 
event .returnValue=false; 
alert ("当前 设置 不 允许 使 用 F5 刷新 键 ") ; 
}if((event.altKey) &&( (window.event.keyCode==37) || (window.event.keycod 
e==39) ) ) { 
eVent .TeturnValue=false7 
alert (" 当 前 设置 不 允许 使 用 Alt+ 方 向 键 一 或 方向 键 一 ") ; 
}if((event.ctrlKey) && (event .keyCcode==78) )1{ 
event .returnValue=false; 
alert ("当前 设置 不 允许 使 用 ctrl+n 新 建 IE 窗口 ") 
}if((event.shiftKey)&& (event.keyCode==121)){ 
event .returnValue=false; 
alert ("当前 设置 不 允许 使 用 shift+F10"); 
} 
， 
</script> 
</head> 
<body onkeydown="keydown()"> 
<table width="396" height="495" border="0" align="center" cellpadding="0" 
cellspacing="0"> 
<tr> 
<td ><img src="01.jpg" ></td> 
</tr> 
</table> 


</body> 
</html> 


在 正 浏览 器 中 运行 上 述 程 序 ， 按 回 车 键 、 退 格 键 、F5 键 、CtlHN 组 合 键 、Shiftt+F10 组 
合 键 都 会 弹出 相应 的 提示 信息 。 如 图 21-7 所 示 为 按 下 F5 后 弹出 的 提示 信息 ; 如 图 21-8 所 示 
为 按 下 回 车 键 后 弹出 的 提示 信息 。 
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图 21-7 按 下 F5 键 后 弹出 的 提示 信息 图 21-8 按 下 回 车 键 后 弹出 的 提示 信息 


21.2.2 案例 一 一 屏 菩 鼠标 右键 


用 户 在 浏览 网 页 时 ， 经 常会 使 用 鼠标 右键 进行 快捷 方式 的 操作 ， 例 如 查看 源 文件 、 刷 新 
等 ， 但 是 某 些 网 站 并 不 想 让 用 户 执 行 这 些 操作 ， 这 就 需要 使 用 JavaScript 脚本 的 鼠标 事件 屏蔽 
掉 鼠 标 右键 的 操作 。 

【 例 21.2】 (实例 文件 ， ch21\21.2.htmD) 屏 项 鼠标 右键 。 代 码 如 下 


<!DOCTYPE> 
<head> 
<title> 屏 项 鼠标 右键 </title> 
<script language=javascript> 
function click() { 
event.returnValue=false; 


alert ("当前 设置 不 允许 使 用 右键 ! ") ; 


py GG 


} 
document .oncontextmenu=click; 
</script> 
</head> 
<body > 
<table width="396" height="495" border="0" align="center" cellpadding="0" 
cellspacing="0"> 
<tr> 
<td ><img src="01.jpg" ></td> 
</tr> 
</table> 
</body> 
</html> 


在 正 浏 览 器 中 运行 程序 ， 当 用 户 鼠 标 右 击 时 ， 就 会 弹出 如 图 21-9 所 示 的 信息 提示 对 话 框 。 
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图 21-9 屏蔽 提示 对 话 框 
21.2.3 ”案例 一 一 禁止 网 页 另存 为 


在 一 些 商 业 网 站 中 ， 经 常 需要 在 网 站 上 发 布 一 些 重 要 信息 ， 这 些 网 站 只 对 用 户 提 供 浏 
览 ， 禁 止 用 户 下 载 或 将 整个 网 页 另存 为 。 使 用 JavaScript 脚本 中 的 noscript 标记 可 以 实现 这 些 
功能 。 

【 例 21.3】 (实例 文件 : ch21\21.3.htmD 禁 止 网 页 另存 为 。 代 码 如 下 : 


<!DOCTYPE> 

<html> 

<head> 

<title> 禁 止 网 页 另存 为 </title> 

</head> 

<body> 

<noscript><iframe src="21.3.html"></iframe></noscript> 
<div align="center"><img src="0.jpg" ></div> 

</body> 

</html> 


在 正 浏览 器 中 运行 程序 ， 当 打开 网 页 进行 浏览 时 ， 选 择 【 文 件 】| 【另存 为 】 命 令 ， 然 后 
选择 文件 所 要 保存 到 的 指定 位 置 后 ， 单 击 【 确 定 】 按 钮 ， 将 弹出 一 个 信息 提示 框 ， 显 示 “ 无 
法 保存 该 网 页 ”， 如 图 21-10 所 示 。 


21-10 ”禁止 网 页 另存 为 信息 提示 框 
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21.2.4 ”案例 一 禁止 复制 网 页 内 容 
有 些 网 页 中 的 数据 只 供用 户 进行 浏览 ， 不 允许 用 户 对 其 进行 复制 、 粘 贴 等 操作 。 使 用 
<body> 中 的 相关 事件 可 以 禁止 用 户 复制 网 页 内 容 。 
【 例 21.4】 (实例 文件 ，ch21\21.4.html) 禁 止 复制 网 页 内 容 。 代 码 如 下 : 1 
<!DOCTYPE> 
<html> 
<head> 
<title> 禁 止 复制 网 页 内 容 </title> 
</head> 
<body onselectstart="return false"> 
<table width="782" height="706" border="0" align="center" cellpadding="0" 
cellspacing="0" background="bg.jpg"> 
<tr> 
<td height="231" colspan="2">gnbsp;</td> NN 
<td width="188" height="231">gnbsp;</td> 


</tr> 
<tr> 


<td width="57" height="15" align="left" valign="top" style="text— 
indent:5px; font-size:12px"><p>&nbsp;</p> 
<p>g&nbsp;</p></td> 
<td width="237" align="left" valign="top" style="text-indent:10px; 
font-size:15px"> 


AM 


1、 免 费 提交 加 盟 申请 ; 
<p>2 、 0 加 盟 商会 收 到 “特许 经 营 合同 ”, 并 与 公司 签订 合同 ; </p> 
<p>3 、 加 盟 商 缴纳 


证 金 ; 
<p>4 、 加 归 阐 省 批 进 和 灶 。 估 富 收 到 首 批 进 贷款 后 发 贷 ; </p> 
<p>5 、 加 盟 商 收 货 验 货 ; </p> 
<p>6 、 加 盟 店 正式 营业 。</p></tqd> 
<td height="975">gnbsp;</td> 
SAEr 
</table> 
</body> 
</html> 


在 下 浏览 器 中 运行 上 述 程序 ， 打 开 如 图 21-11 所 示 的 页 面 ， 其 中 正文 部 分 的 内 容 是 不 能 
被 选中 复制 的 。 


工 、 龟 本 提交 加 时 申请 


2 、 加 可 由 计 于 过 公司 守信 后 ,加 里 商会 收 到 “将 许 生 若 
合同”, 并 与 公司 特 订 合同 ; 


3 、 加 革 商 要 纳 集 证 会， 
4、 加 可 商工 贡 技 进 寺 吉 , 公司 改 到 可 雍 坦 入 后 渍 ) 
5 、 加 村 商 收 全 友人 : 


下、 各 各 正式 本 业 - Md 


sp 
0% ~ 


图 21-11 ”禁止 复制 网 页 内 容 效 果 


‘0@ 
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21.3 “案例 一 一 JavaScript 代码 加 密 


为 了 防止 自己 编写 的 脚本 或 者 源码 被 别人 盗 取 ， 通 常 使 用 Script Encoder 工具 加 密 


JavaScript 代码 。 
Script Encoder 是 Microsoft 出 品 的 一 个 JavaScript 加 密 工 具 ， 该 程序 除了 可 以 对 html 文件 


加 密 外 ， 也 可 以 对 asa、asp、cdx、htm、html、js、sct 和 vbs 文件 进行 加 密 。 加 密 后 对 
JavaScript 的 功能 并 无 影响 ， 仅 使 其 代码 变 为 密码 ， 用 源 文件 方式 查看 只 是 一 些 乱码 。 

Script Encoder 是 一 个 简单 的 命令 行 工 具 ， 该 程序 可 以 在 DOS 命令 行 下 执行 ， 执 行文 件 为 
SCRENC.EXE。 它 的 操作 非常 简单 ， 执 行 语 句 的 语法 如 下 : 

SCRENC [/s] [/f] [/x1] [/1 defLanguage ] [/e defExtension] source 

destination 


语法 的 参数 及 说 明 如 表 21-2 所 示 。 
表 21-2 语法 的 参数 及 说 明 


参 数 说 明 

可 选项 。 指 定 脚本 编码 器 的 工作 状态 是 否 为 静态 。 如 果 为 静态 ， 即 产生 无 屏幕 输 

出 ， 如 果 省 略 ， 则 提供 元 余 输出 

/f 可 选项 。 指 定 输出 文件 是 否 覆 盖 同 名 输入 文件 。 忽 略 ， 将 不 执行 覆盖 

/xl 可 选项 。 是 否 在 .asp 文件 的 顶部 添加 @Language 指令 。 忽 略 ， 将 添加 

可 选项 。 指 定 Script Encoder 加 密 中 选择 的 缺 省 脚本 语言 。 文 件 中 不 包含 这 种 脚本 

语言 特性 的 脚本 将 被 Script Encoder 忽略 。 对 于 HTML 和 脚本 文件 来 说 ， 

JavaScript 为 内 置 缺 省 脚本 语言 。 对 于 ASP 文件 ，VBScript 为 缺 省 脚本 语言 。 同 
时 对 于 扩展 名 为 .vbs 或 js 的 文件 Script Encoder 有 自 适应 能 力 

可 选项 。 指 定 待 加 密 文件 的 文件 扩展 名 。 默 认 状态 下 ，Script Encoder 能 识别 

asa、asp、cdx、htm、html、js、sct 和 vbs 文件 

Source 必 选 项 ， 被 编码 的 文件 名 称 ， 包 括 路 径 信息 

Destination 必 选 项 。 要 生成 的 文件 的 名 称 ， 包 括 路 径 信息 


/l defLanguage 


/e defExtension 


【 例 21.5】 (实例 文件 : ch21\21.5.html)JavaScript 代码 加 密 。 操 作 步 又 如 下 。 

安装 Script Encoder 加 密 工 具 。 

莉 于 选择 【开始 】| 【程序 】| 【附件 】| 【运行 】 菜 单 命令 ， 打 开 【 运 行 】 对 话 框 ， 在 
其 中 输入 “cmd”， 如 图 21-12 所 示 。 

ES 单 击 【 确 定 】 按 钮 ， 打 开 【 命 令 提 示 符 】 窗 口 。 在 其 中 输入 命令 ， 如 图 21-13 所 
示 。 命 令 如 下 : 


screnc c:\index.html c:\indexl.html 


G0 


局 


画 管理 呈 C\Windovws\system3Aemd .exe 


于 运行 一 


Windows 梅 根据 您 所 输入 的 名 称 为 您 打开 框 应 的 程序 、 
文件 夫 、 文 档 或 Internet 资源 . 


打开 (O): cmd - 
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性 


确定 取 户 济 况 (B)… 


图 21-12 【运行 】 对 话 框 图 21-13 【命令 提示 符 】 窗 口 


EET 执行 命令 ， 就 完成 了 对 JavaScript 代码 进行 加 密 的 操作 。 文 档 中 的 JavaScript 代 
码 加 密 前 后 的 区 别 如 图 21-14 和 图 21-15 所 示 。 
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图 21-14 JavaScript 代码 加 密 前 图 21-15 JavaScript 代码 加 密 后 


21.4” 跟 我 练 练 手 


1. 练习 目标 
东 掌 握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: 设置 正 浏览 器 的 安全 区 域 。 
练习 2: 掌握 JavaScript 代码 的 安全 设置 。 
练习 3: 掌握 给 JavaScript 代码 加 密 的 方法 。 


能 够 刘 
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21.5 高 手 甜 点 


甜点 1: 在 使 用 Script Encoder 时 为 何 会 出 现 以 下 错误 提示 信息 ? 
"Script Encoder object <"Scripting.Encoder"> not found " 


之 所 以 会 出 现 上 述 提示 信息 ， 是 因为 使 用 Script Encoder 需要 Script Engine 5.0 或 以 上 脚 
本 引擎 的 支持 。 解 决 的 办 法 有 两 个 : 升级 浏览 器 到 正 5.0 以 上 或 安装 Script Engine 5.0。 


甜点 2: 网 页 另存 为 被 禁止 ， 如 何 解 除 ? 


使 用 JavaScript 脚本 中 的 noscript 标记 可 以 防止 网 页 被 男 存 为 。 当 然 ， 如 果 想 要 解除 这 个 
禁止 ， 可 以 使 用 浏览 器 打开 该 网 页 的 源 文件 ， 将 noscript 标记 中 的 内 容 删除 即 可 。 


~ 
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第 4 篇 
网 页 特效 应 用 案例 


和 第 22 章 经 典 的 网 页 动态 特效 案例 


网 页 吸引 人 之 处 ， 莫 过 于 具 
动态 效果 ， 不 过 利用 CS 
CS 


特效 案例 
特效 。 
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SS 


态 效果 。 利 用 CSS 
动态 效果 非常 有 限 。 
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可 以 轻易 实现 超级 链接 的 


S 能 实现 的 在 网 页 设计 中 ， 还 可 以 将 
S 与 JavaScript 结合 创建 出 具有 动态 效果 的 页 面 。 本 章 将 讲述 最 经 典 的 一 些 网 页 
读者 可 以 举一反三 ， 制 作出 各 种 绚丽 多 彩 的 
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227 汉子 特效 


文字 是 网 页 的 灵魂 ， 没 有 文字 的 网 页 ， 不 管 特效 多 么 绚丽 都 没有 任何 实际 意义 。 文 字 特 
效 始终 是 网 页 设计 追求 的 目标 ， 通 过 JavaScript 可 以 实现 多 个 网 页 的 文字 动态 特效 。 


22.1.1 案例 一 一 设置 打字 效果 的 文字 


文字 的 打字 效果 是 通过 JavaScript 脚本 程序 将 预先 设置 好 的 文字 逐一 在 页 面 上 显示 出 来 。 
具体 实现 步骤 如 下 。 
创建 HTML 页 面 ， 设 置 页 面 基 本 样式 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 打 字 效 果 的 文字 </title> 

<style type="text/css"> 
body{font-size:14px;font-weight:bold;} 
</style> 

</head> 

本 <body> 

白色 水 心 最 新 微 博信 息 : <a id="HotNews" href="" target=" blank"></a> 
</body> 

</html> 


上 述 代码 中 ， 在 <head> 标 记 中 间 ， 设 置 了 body 页 面 的 基本 样式 ， 例 如 字体 大 小 为 14px， 
并 加 粗 ， 在 body 页 面 还 创建 了 一 个 超级 链接 。 

在 IE 9.0 浏览 器 中 运行 上 述 代码 显示 效果 如 图 22-1 所 示 。 从 中 可 以 看 到 页 面 中 只 显示 了 
一 个 提示 信息 。 


《三 Jj 晤 oveP 昌 RDocment B P -Cj ve 
个 打字 效果 的 文字 x 
文件 。 名 豆 雪 (V】 收 划 交 A)。 工具 帮助 (H) 


白色 水 心 最 新 获 博 信息 : 


号 100% > 


22-1 页面 基本 样式 
添加 JavaScript 代码 ， 实 现 打 字 特 效 。 


<SCRIPT LANGUAGE="JavaScript"> 
= 


var NewsTime = 2000; // 每 条 微 博 的 停留 时 间 
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// 微 博文 字 出 现 等 待 时 间 ， 越 小 越 快 


Var TextTime = 50; 

var newsi = 0; 

小 和 七 发 七 二 三 -207 

Var txttimer; 

Var newstimer; 

var newstitle = new Array(); // 微 博 标题 
Var newshref = new Array(); // 微 博 链接 
newstitle[0] = "健康 是 身体 的 本 钱 "; 
newshref[0] = "#"; 

newstitle[1] = "关心 身体 ， 就 是 关心 自己 "; 
newshref[1] = "#"; 

newstitle[2] = "去 西藏 旅游 了 "; 
newshref [2] = "#"; 

newstitle[3] = "大 雨 倾盆 ， 很 大 呀 "; 
newshref [3] = "#"; 


function shownew() 
i 
Var endstr a 
hwnewstr = newstitle[newsil]; 
newslink = newshref [newsi]; 
if (txti==(hwnewstr.length-1)) {endstr="";} 
if (txti>=hwnewstr.length){ 
clearIinterval (txttimer); 
clearInterval (newstimer); 
newsit++? 
if (newsi>=newstitle.length){ 
newsi = 0 
} 
newstimer = setInterval ("shownew()",NewsTime); 
txti = 0; 
return; 
} 
clearIinterval (txttimer); 
document .getElementById ("HotNews") .href=newslink; 
document .getElementById ("HotNews") .innerHTML = 
hwnewstr.substring(0,txti+1) +endstr; 
txtit++2? 
txttimer = setInterval ("shownew()",TextTime); 
shownew (); 
WH 
</SCRIPT> 


在 上 述 JavaScript 代码 中 ， 主 要 调用 shownew0 函 数 实现 打字 效果 。 在 JavaScript 代码 的 
始 部 分 ， 定 义 了 多 个 变量 ， 其 中 数组 对 象 newstitle 用 于 存放 文本 标题 。 之 后 创建 了 
shownew0 函 数 ， 并 在 函数 中 通过 变量 和 条 件 获 取 要 显示 的 文字 ， 通 过 setImterval("shownewO"， 
NewsTime) 语 句 输出 文字 内 容 。 代 码 最 后 使 用 shownew0 语 句 循环 执行 该 函数 中 的 输出 信息 。 

上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 22-2 所 示 。 从 中 可 以 看 到 页 面 中 每 隔 一 定时 
间 就 会 在 提示 信息 后 ， 逐 个 打出 文字 ， 文 字 颜 色 为 蓝 色 。 
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(GS 辣 DAB 产 B 录 \Documents\ 二 只- 
已 打字 效果 的 文字 x 


文件 (有 ”篇 往 (E) ”查看 V) 收 基 夫 (A) 工具 站 


白色 水 心 最 新 获 博 信息 : 大 十 伍 盆 , 很 大 呀 


22-2 ”实现 的 打字 效果 


22.1.2 ”案例 一 一 设置 文字 的 升降 特效 


有 的 网 页 为 了 加 大 广告 宣传 力度 ， 往 往 会 将 文字 处 理 成 升降 特效 ， 用 以 吸引 人 的 注意 
力 。 当 单 击 该 升降 文字 时 ， 链 接 会 自动 跳 转 到 宣传 页 面 。 本 实例 将 使 用 JavaScript 和 CSS 实 
现 文字 升降 效果 。 如 果 需 要 实现 文字 升降 ， 需 要 指定 文字 内 容 和 文字 升降 范围 ， 即 为 文字 在 
HTML 页 面 指定 一 个 层 ， 用 于 升降 文字 。 

具体 步骤 如 下 。 

ET 创建 HTML， 构 建 升降 DIV 层 。 

<!DOCTYPE html> 

<html> 

<head> 

<title> 升 降 的 文字 效果 </title> 

</head> 

<body> 

<div id="napis" style="position: absolute;top: -50;color: #000000;font-— 

family: 宋 体 ; font-size:9pt;border:1lpx #ddeecc solid"> 


<a href="" style="font-size:12px’;text-decoration:none;"> 
水 月 大 酒店 ， 欢 迎 天 下 来 宾 ! 
</a></div> 


<script language="Javascript"> 
0 

setTimeout ('start ()',20); 
> 

</script> 

</body> 

</html> 


上 述 代 码 创建 了 一 个 DIV 层 ， 用 于 存放 升降 的 文字 ， 层 的 ID 名 称 为 napis， 并 在 层 的 
style 属性 中 定义 了 层 显示 样式 。 例 如 字体 大 小 、 边 框 、 字 形 等 。 在 DIV 层 中 ,创建 了 一 个 超 
级 链接 ， 并 设 定 了 超级 链接 的 样式 。 其 中 的 script 代码 ， 用 于 定时 调用 start 函数 。 

上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 22-3 所 示 。 
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图 22-3 文字 页 面 
EDPy 添加 JavaScript 代码 ， 实 现 文字 升降 。 


<script language="JavaSscript"> 

二 三 

done 07 

step 4 

function anim(yp,yk) 

if (document .1Layers) document.layers["napis"] .top=yp; 
else document .all["napis"].style.top=Yp7 
if(yp>yk) step = -4 

if(yp<60) step = 4 

setTimeout ('anim('+(YP+Step)+'v '+yk+')', 35); 
}function start() 

{ 

if(done) return 

done = 1; 

if (navigator.appName=="Netscape") { 

Var nap=document .getElementById ("napis"); 
nap.left=innerWidth/2 - 145; 
anim(60,innerHeight - 60) 

} 

cEse 1 

napis.style.left=11; 

anim(60,document .body.offsetHeight - 60) 
/> 


</script> 


上 述 代码 创建 了 函数 anim0 和 start0， 其 中 anim0) 函 数 用 于 设 定 每 次 升降 的 数值 ，startO 
函数 用 于 设 定 每 次 开始 的 升降 坐标 。 上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 22-4 所 示 。 
从 中 可 以 看 到 页 面 中 超级 链接 自动 上 下 移动 。 


天下 天 本 让 ， 允 遂 天 下 来 这 


图 22-4 上 下 移动 
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22.1.3 “案例 一 一 设置 跑马 灯 效 果 


网 页 中 有 一 种 特效 被 称 为 跑马 灯 ， 即 文字 从 左 向 右 自动 输出 ， 和 晚上 写字 楼 的 一 些 广告 
需 虹 灯 非 常 相似 。 在 网 页 中 ， 如 果 CSS 样式 设计 非常 完美 ， 就 会 显示 出 靓丽 的 网 页 效果 。 完 
成 跑马 灯 效 果 ， 需 要 使 用 JavaScript 语言 设置 文字 内 容 、 移 动 速度 和 相应 输入 框 ， 使 用 CSS 
设置 显示 文字 样式 。 输 入 框 用 来 显示 水 平移 动 文 字 。 具 体 步骤 如 下 。 

EECSDD 创建 HIML， 实 现 输入 表单 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 跑 马 灯 </title> 
</head> 

<body onLoad="LenSscroll()"> 

<center> 

<form name="nextForm"> 

<input type=text name="lenText"> 

</form> 

</center> 

</body> 


上 述 代码 非常 简单 地 创建 了 一 个 表单 ， 表 单 中 存放 了 一 个 文本 域 ， 用 于 显示 移动 的 
文字 。 

上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 22-5 所 示 。 从 中 可 以 看 到 页 面 中 只 存在 一 个 
文本 域 ， 没 有 其 他 显示 信息 。 
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图 22-5 实现 基本 表单 
添加 JavaScript 代码 ， 实 现 文字 移动 。 


<script language="javascript"> 

var msg=" 品 味 中 原文 化 ， 寄 情 黄河 风景 "; 。 / /移动 文字 
var interval = 400; / /移动 速度 
Var seq=0; 


function Lenscroll() { 
document .nextForm.lenText .value = msg.substring(seq, msg.length) + " "+ msg; 
seqt+? 
if ( seq > msg.length ) 
seq = 0; 
window.setTimeout ("LenScroll();", interval); 
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</script> 


上 述 代码 中 ， 创 建 了 一 个 变量 msg 用 于 定义 移动 的 文字 内 容 ， 变 量 interval 用 于 定义 文字 
移动 速度 ; LenScroll0 函 数 用 于 在 表单 输入 框 中 显示 移动 信息 。 


在 正 9.0 浏览 器 中 运行 上 述 代码 ， 显 示 效 果 如 图 22-6 所 示 。 从 中 可 以 看 到 输入 框 中 显示 
了 移动 信息 ， 并 且 从 右 向 左 移动 。 


添加 CSS 代码， 修饰 输入 框 和 页 面 。 


<style type="text/css"> 
= 


body{ 
background-color:#FFFFFF; /* 页 面 背景 色 */ 

3 

input{ 
background:transparent; /* 输入 框 背景 透明 */ 
border:none; /* 无 边框 */ 


Color:#ffb400; 
font-size:45px; 
font-weight:bold; 
font-family: 黑 体 ; 
}--></style> 


上 述 代码 设置 了 页 面 背景 颜色 为 白色 ， 在 input 标记 选择 器 中 ， 定 义 了 边框 背景 为 透明 ， 


无 边框 ， 字 体 颜色 为 黄色 ， 大 小 为 45px， 加 粗 并 黑体 显示 。 在 下 9.0 浏览 器 中 上 述 代码 的 显 
示 效 果 如 图 22-7 所 示 。 


全 司 CA 用 户 日 录 ,Documents\ 姑 马 灯 效果 htm 车 站- 地 
车 吧 s 休 x| 


文件 (站 将 各 E) 豆 看 (V) 。 收 讲 闪闪) 工具 Mm 帮助 (H) 


立体 了。 锯 胆 E) 重要 (V) 民 玉 (A| 工具 站 郝 时 (H) 
摧 河 风 果 ”马帮 中 原文 | 


情 黄河 风景 ” 品味 中 原 


图 22-6 ”实现 移动 效果 图 22-7 最 终 效果 


22.2 图 片 特效 


图 片 是 网 页 当中 比较 重要 的 元 素 ， 使 用 JavaScript 向 网 页 中 添加 图 片 特效 ， 在 一 定 程度 上 
加 强 了 网 页 的 动态 效果 ， 使 网 页 更 具 趣味 性 、 灵 活性 。 


22.2.1 案例 一 一 设置 闪烁 图 片 
图 片 闪烁 是 常用 的 一 种 特效 ， 用 JavaScript 实现 起 来 非常 简单 。 需 要 注意 的 是 时 间 间隔 这 
个 参数 。 数 值 越 大 ， 闪 烁 越 不 连续 ， 数 值 越 小 ， 闪 烁 越 历 害 。 这 个 值 可 以 随意 更 改 ， 直 到 取 
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得 满意 的 效果 。 下 面 我 们 将 图 片 放 在 一 个 DIV 层 上 ， 设 定 图 片 为 可 见 的 ， 然 后 使 用 JS 程序 代 
码 设置 DIV 层 的 显示 和 隐藏 ， 这 样 就 达到 了 图 片 的 闪烁 效果 。 具 体 步 骤 如 下 。 
ED 创建 HTML 页 面 ， 构 建 DIV 层 。 


<!DOCTYPE html> 

<HTML> 

<HEAD> 

<TITLE> 闪 烁 图 片 </TITLE> 

</HEAD> 

<BODY ONLOAD="soccerOnload()" topmargin="0"> 
<DIV ID="soccer" STYLE="position:absolute; left:150; top:0"> 
<a href=""> 

<IMG SRC="feng.jpg" border="0"></a> 

</DIV> 

</BODY> 

</HTML> 


上 述 代 码 中 ， 创 建 了 一 个 DIV 层 ， 其 ID 名 称 为 soccer， 样 式 为 绝对 定位 ， 坐 标 位 置 在 
(150,0)。 然 后 在 该 层 中 ， 创 建 了 一 张 图 片 ， 不 带 有 边框 。 

在 焉 9.0 浏览 器 中 上 述 代码 的 显示 效果 如 图 22-8 所 示 。 从 中 可 以 看 到 显示 的 图 片 不 具有 
闪烁 效果 。 
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图 22-8 图 片 
添加 JavaScript 代码 ， 实 现 图 片 闪烁 


<SCRIPT LRNGURGE="JavaScript"> 

var msecs = 500; // 改 变 时 间 得 到 不 同 的 闪烁 间隔 
Var counter = 07 

function socceronload () { 

setTimeout ("blink()", msecs); 

. 

function blink() { 
soccer.style.visibility = 
(soccer.style.visibility == "hidden") ? "visible" : "hidden"; 
counter +=17 

setTimeout ("blink()", msecs); 


令 472 


</SCRIPT> 


在 上 述 代 码 中 ， 创 建 了 变量 msecs 用 于 定义 闪烁 时 间 间 隔 ; 创建 了 变量 counter 用 于 计 


数 。 在 函数 soccerOnload0 中 设 定 了 每 隔 指定 时 间 图 片 闪烁 一 次 ;函数 blinkO 用 于 设 定 图 片 显 
示 ， 即 层 是 隐藏 还 是 可 见 。 
在 下 9.0 浏览 器 中 运行 上 述 代码 ， 显 示 效 果 如 图 22-9 所 示 。 从 中 可 以 看 到 显示 的 图 片 
在 指定 时 间 内 闪烁 。 
[全 eeaooanenamsasnm| Sp-c 
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图 22-9 最 终 效果 


22.2.2 ”案例 一 一 设置 左右 移动 的 图 片 


在 广告 栏 ， 经 常会 存在 从 右 向 左 移动 或 者 从 左 向 右 移动 的 一 张 或 者 多 张 图 片 。 这 不 但 能 


增加 页 面 效果 ， 还 能 获取 经 济 利益 。 本 实例 将 使 用 JavaScript 和 CSS 创建 一 张 左 右 移 动 的 图 


片 。 


要 实现 左右 移动 的 图 片 ， 需 要 在 页 面 上 定义 一 张 图 片 ， 然 后 利用 JavaScript 程序 代码 ， 获 


取 图 片 对 象 ， 并 使 其 在 一 定 范围 内 ， 即 水 平方 向 上 自由 移动 。 有 具体 步骤 如 下 。 


EC 创建 HTML 页 面 ， 导 入 图 片 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 左 右 移动 图 片 </title> 

</head> 

<body> 

<img src="feng.jpg" name="picture" 
style="position: absolute; top: 70px; left: 30px;" BORDER="0" WIDTH="140" 
HEIGHT="40"> 

<script LANGUAGE="JavaScript"><!-—— 
setTimeout ("moveLR('picture',300,1)",10); 
//==></script> 

</body> 

</html> 


上 述 代 码 中 ， 定 义 了 一 张 图 片 ， 图 片 是 绝对 定位 ， 左 边 位 置 是 (70.30)， 无 边框 ， 宽 度 为 


140 像素 ， 高 度 为 40 像素 。script 标记 中 ， 使 用 setTimeout 方法 ， 定 时 移动 图 片 。 


在 正 9.0 浏览 器 中 上 述 代码 的 显示 效果 如 图 22-10 所 示 。 


[es 


便 漳 涤 绯 记 半 沼 到 号 将 也 需 zz 小 


43@ 


JavaScript 动 态 网 站 开发 
案例 课堂 >… 


县 100% ~ 


图 22-10 图 片 显示 
EEIRP 加 入 Js 代码 ， 实 现 图 片 左 右 移动 。 


<script LANGUAGE="JavaScript"><!-— 
step = 0; 
obj = new Image(); 


function anim(xp,xk,smer) //smer = direction 
{ 
obj.style.left = x; 


A X += step*smer; 
if (x>=(xk+xp)/2) { 
IE (smer == 1) step-—-; 
clse SEcptts 
3 
elser 
if (smer == 1) stept++; 
else step= 
if (x >= xk) { 
X = Xk7 
Smer = “15 
3 
EE Nx = RD) 
xX = XP7 
smer = 1; 
HAs (mer Ss 2) mar = 3 
setTimeout ('anim('+xp+', '+xk+', '+smer+')', 50); 
} 
function moveLR(objID,movingarea width,c) 
{ 
if (navigator.appName=="Netscape") window width = window.innerWidth; 
else window width = document .body.offsetWwidth; 
obj = document.images [objID]; 
image width = obj.width; 
Xl = obj.style.left; 
x = Number (x1.substring (0,x1.length-2)); // 30px -> 30 
if (c == 0) { 
if (movingarea width == 0) { 


right margin = window width - image width7 

anim(x,right margin,1); 

: 

Slse{ 

right margin = x + movingarea width - image width; 

if (movingarea width < x + image width) window.alert ("No space for 
moving!"); 

else anim(x,right margin,1); 

} 

} 

else { 

if (movingarea width == 0) right margin = window width - image width 
else { 

x = Math.round((window width-movingarea width)/2); 

right margin = Math.round((window width+movingarea width)/2)-image width7 
} 

anim(x,right margin,1); 

} 

} 

//--></script> 


上 述 代 码 和 文字 水 平方 向 移动 的 原理 基本 相同 ， 只 不 过 对 象 不 同 罢了 ， 这 里 就 不 再 介绍 。 
在 下 9.0 浏览 器 中 运行 上 述 代 码 ， 显 示 效果 如 图 22-11 所 示 。 从 中 可 以 看 到 网 页 上 显示 
了 一 张 图 片 ， 并 在 水 平方 向 上 自由 移动 。 


gl 闻 DA 用 户 目录 \Documents\ 左 右 称 动 的 图 片 htm| 写 及 - 
感 左右 移动 图 片 x 
文件 。 编 加 (E) 。 坦 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


图 22-11 最 终 效 果 


22.3 ”网 页 菜单 特效 


网 页 包含 的 信息 比较 多 的 时 候 ， 就 需要 设计 出 一 些 导 航 菜单 来 实现 页 面 导 航 。 如 果 使 用 
JavaScript 代码 将 菜单 做 成 动态 效果 ， 此 时 菜单 将 会 更 加 吸引 人 。 


22.3.1 ”案例 一 一 设置 向 上 滚动 菜单 
本 实例 将 结合 前 面 学 习 的 内 容 ， 创 建 一 个 向 上 滚动 的 菜单 ， 实 现 菜 单 自动 从 下 到 上 滚 


动 ， 需 要 把 握 两 个 元 素 ， 一 个 是 使 用 JS 实现 要 滚动 的 菜单 ， 即 导航 栏 ， 另 一 个 是 使 用 JS 控 
制 菜单 移动 方向 。 具 体 步骤 如 下 。 
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ECG 构建 HTML 页 面 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 向 上 滚动 的 菜单 </title> 

</head> 

<body bgcolor="#FFFFFF" text="#000000"> 
</body></html> 


上 述 代码 比较 简单 ， 只 是 实现 了 一 个 空白 页 面 ， 页 面 背景 色 为 白色 ， 前 景色 为 黑色 。 在 
下 9.0 浏览 器 中 上 述 代码 的 显示 效果 如 图 22-12 所 示 ， 可 以 看 到 显示 了 一 个 空白 页 面 。 


em 


Lm p- ol 
大 向上 x 


文件 (月 ” 妨 编 (E)】 音 看 (V) 收藏 闪 (A) 工具 (T) 帮助 (H) 


N 
NN 图 22-12 空白 HTML 页 面 
| 
TP 加 入 JavaScript 代码 ， 实 现 菜单 滚动 。 
<script language=javascript> 
< 

Var index = 9 

link = new Array(8); 

link[0] ='timel.htm’' 

link[1] ='time2.htm' 

link[2] ='time3.htm’' 

link[3] ='"timel.htm'" 

link[4] ='time2.htm’' 

link[5] ='time3.htm' 

link[6] ='timel.htm’' 

link[7] ="'time2.htm' 

link[8] ='time3.htm’' 

text = new Array(8); 

text[0] =' 首 页 ' 

text [1] =' 产 品 天 地 ' 

text [2] =' 关 于 我 们 ' 

text [3] =' 资 讯 动态 ' 

text [4] =' 服 务 支持 ' 

text[5] =' 会 员 中 心 ' 

text[6] =' 网 上 商城 ' 

text [7] =' 官 方 微 博 ' 

text[8] =' 企 业 文化 ' 

document .write ("<marquee scrollamount='1' scrolldelay='100' direction= 
"up' width='150'! height="'150'>"); 

for (i=0;i<index;i++) 

上 
document .write ("&nbsp;<img src='dian3.gif'" width='12' height='12'><a 

href="+link[i]+" target=' blank'>"); 
document .write (text[i] + "</A><br>"); 
四 


} 
document .write ("</marquee>") 
WHS=></script> 


上 述 代码 创建 了 link 和 text 两 个 数组 对 象 ， 用 来 存放 菜单 链接 对 象 和 菜单 内 容 ， 在 之 后 
代码 中 ， 使 用 <marquee> 定 义 页 面 在 垂直 方向 上 向 上 移动 。 

在 正 9.0 浏览 器 中 运行 上 述 代 码 ， 显 示 效果 如 图 22-13 所 示 。 从 中 可 以 看 到 页 面 左 侧 有 
一 个 菜单 ， 自 下 向 上 自由 移动 。 
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图 22-13 最终 效果 
22.3.2 ”案例 一 一 设置 树 形 菜 单 


作为 首页 ， 有 时 为 了 效果 不 得 不 将 所 有 需要 导航 的 部 分 都 放 到 一 个 导航 菜单 中 。 树 形 导 
航 菜单 是 网 页 设计 中 最 常用 的 菜单 之 一 ， 本 实例 将 创建 一 个 树 形 菜单 ， 要 实现 一 个 树 形 菜 
单 ， 需 要 3 个 方面 配合 : 一 个 是 <ul> 无 序列 表 ， 用 于 显示 的 菜单 ; 一 个 是 CSS 样式 ， 修 饰 树 
形 菜单 样式 ; 一 个 是 JavaScript 程序 ， 实 现 单 击 时 展开 菜单 选项 。 具 体 步 骤 如 下 。 

EEJDp 创建 HIML 页 面 ， 实 现 菜单 列表 。 


<!DOCTYPE html> 
<html > 
<head> 
<title> 树 形 菜单 </title> 
</head> 
<body> 
<ul id="menu zzjs net"> 
<1i> 
<label><a href="javascript:;"> 计 算 机 图 书 </a></1label> 
<ul class="two"> 
<1i> 
<label><a href="javascript:;"> 程 序 类 图 书 </a></label> 
<ul class="two"> 
Li 
<label><input type="checkbox" value="123456"><a 
href="javascript:;">Java 类 图 书 </a></1label> 
<ul class="two"> 
<li><label><input type="checkbox" value="123456"><a 
href="javascript:;">Java 语言 类 图 书 </a></label></1i> 
EE 
<label><input type="checkbox" value="123456"><a 
href="javascript:;">Java 框架 类 图 书 </a></label> 
<ul class="two"> 
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EC 放任 
<label><input type="checkbox" value="123456"><a 
href="javascript:;">Struts2 图 书 </a></label> 
<ul class="two"> 
<li><label><input type="checkbox" value="]123456"><a 
href="javascript:;">strutsl</a></label></1i> 
<li><label><input type="checkbox" value="123456"><a 
href="javascript:;">struts2</a></label></1i> 
</ul> 
</1i> 
<li><label><input type="checkbox" value="123456"><a 
href="javascript:;">Hibernate 入 门 </a></label></1i> 
</ul> 
</1i> 
</ul> 
/Ii> 
</ul> 
ce 
<1i> 
<label><a href="javascript:;"> 设 计 类 图 书 </a></label> 
<ul class="two"> 
\ <li><label><input type="checkbox" value="123456"><a 
XN href="javascript:;">PS 实例 大 全 </a></label></1i> 
\ <li><label><input type="checkbox" value="123456"><a 
\ href="javascript:;">Flash 基础 入 门 </a></label></1i> 
\ </ul> 
</1i> 
</ul> 
PE 
</ul> 
</body> 
</html> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 22-14 所 示 。 从 中 可 以 看 到 无 序列 表 在 页 面 
上 显示 ， 并 且 显示 了 全 部 元 素 。 


图 22-14 无 序列 表 


添加 JavaSeript 代码 ， 实 现 单 击 展开 。 


<script type="text/javascript" > 
function addEvent (el,name, fn){// 绑 定 事件 
if(el.addEventListener) return el.addEventListener (name,fn,false); 


#9 


return el.attachEvent ('on'+name, fn); 
} 
function nextnode (node) {// 寻 找 下 一 个 兄弟 并 剔除 空 的 文本 节点 
if(!node)return 7 
if(node.nodeType == 1) 
return node; 
if (node .nextSibling) 
return nextnode (node .nextSibling) 7 
} 
function prevnode (node) {// 寻 找 上 一 个 兄弟 并 剔除 空 的 文本 节点 
if(!Inode)return 7 
if(node.nodeType == 1) 
return node; 
if (node.previousSibling) 
return prevnode (node.previousSibling); 
} 
function parcheck (self, checked) {// 递 归 寻 找 父亲 元 素 ， 并 找到 input 元 素 进行 操作 
Var Pa = 
prevnode (self .parentNode.parentNode.parentNode.previousSibling),parspar; 
if (pargg&par.getElementsByTagName ('input') [0]){ 
par.getElementsByTagName ('input') [0] .checked = checked; 


便 漳 泛 磊 记 半 河 到 号 奖 辽 需 zz 小 人 鲁 


GG 


parcheck (par.getElementsByTagName ('input') [0],sibcheck (par.getElementsByTag 
Name ('input') [0])); 
1 


} 
function sibcheck (self) {// 判 断 兄弟 节点 是 否 已 经 全 部 选中 


var sbi = self.parentNode.parentNode.parentNode.childNodes,n=0; 
for (Var i=0;i<sbi.length;i++){ 
if(sbi[il.nodeType != 1) 
// 由 于 孩子 节点 中 包括 空 的 文本 节点 ， 所 以 这 里 累计 长 度 的 时 候 也 要 算 上 去 
D+ 二 7 
else if(sbi[i].getElementsBYTagName ('input') [0] .checked) 
n+ 
} 
return n==sbi.length?true:false; 
} 
addEvent (document .getElementById('menu zzjs net'),'click',function(e){ 
// 绑 定 input 单 击 事件 ， 使 用 menu zzjs net 根 元 素 代理 
e = ellwindow.event7 
Var target = e.target|l|e.srcElement; 
Var tp = nextnode (target .parentNode .nextSibling) 7 
switch(target.nodeName){ 


case 'A':// 单 击 A 标 签 展 开 和 收缩 树 形 目录 ， 并 改变 其 样式 会 选中 checkbox 


if(tp&&tp.nodeName == 'UL'){ 
if(tp.style.display != 'block' ){ 
tp.style.display = 'block'; 
prevnode (target .parentNode.previousSibling) .className = 'ren' 
}elsef 
tp.style.display = 'none'; 


prevnode (target .parentNode.previousSibling) .className = "add'" 


和 
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} 
break; 
case 'SPAN' :// 单 击 图 标 只 展开 或 者 收缩 
Var ap = nextnode (nextnode (target .nextSibling) .nextSibling); 
if(ap.style.display != 'block' ){ 
ap.style.display = "block'7 
target.className = 'ren' 


jelsef 
ap.style.display = 'none'; 
target.className = "add' 


} 


break; 


case 'INPUT' :// 点 击 checkbox， 父 亲 元 素 选中 ， 则 孩子 节点 中 的 checkbox 也 同时 选中 ， 孩 
子 节点 取消 ， 父 元 素 随 之 取消 
if(target.checked){ 
if (tp){ 
Var checkbox = tp.getElementsByTagName ('input'); 
forl(var i=0;i<checkbox.length;i++) 
checkbox[i] .checked = true; 
1 
jelsef{ 
if (tp){ 
Var checkbox = tp.getElementsByTagName ('input'); 
Eor (Var i=0;i<checkbox.length;i++) 
checkbox [i] .checked = false; 
} 
parcheck (target, sibcheck (target)); 
// 当 孩子 节点 取消 选中 的 时 候 调 用 该 方法 ， 递 归 其 父 节点 的 checkbox 逐一 取消 选中 
break; 
} 


1D); 
window.onload = function() {// 页 面 加 载 时 给 有 孩子 节点 的 元 素 动态 添加 图 标 


Var labels = document .getElementById('menu zzjs net') .getElementsByTagName 
telabel ys 

for (Var i=0;i<labels.length;i++){ 

Var span = document .createElement('span') 7 
span.style.cssText ='display:inline-bloc 

align:middle;width:16px;cursor:pointer;'; 

span.innerHTML = "' "' 

span.className = 'add'; 


eight:18px;vertical— 


if (nextnode (labels[i] .nextSibling) &&nextnode (labels [i] .nextSibling) .nodeNam 
e == "UL') 
labels[i] .parentNode.insertBefore (span,labels[i]); 
e1se 
labels[i].className = 'rem’' 
i 
» 
</script> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 22-15 所 示 ， 可 以 看 到 无 序列 表 在 页 面 上 显 


示 ， 使 用 鼠标 单 击 可 以 展开 或 关闭 相应 的 选项 ， 但 其 样式 非常 难看 。 
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图 22-15 实现 鼠标 单 击 事件 
EUE) 添加 CSs 代码， 修饰 列表 选项 。 


<style type="text/css"> 

body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} 
ul,li, {margin:0;padding:0;} 

ul{list-style:none;} 

#menu zzjs net{margin:10px;width:200px;overflow:hidden;} 

#menu zzjs net li{line-height:25px;} 

#menu zzjs net .rem{padding-left:16px;} 

#menu zzjs net .add{background:url() -4px -3lpx no-repeat;} 
#menu zzjs net .ren{background:url() -4px -7px no-repeat;} 

#menu zzjs net 1i a{color:#666666;padding-— 
left:S5px;outline:none;blr:expression (this.onFocus=this.blur());} 
#menu zzjs net 1i input{vertical-align:middle;margin-left:S5px;} 
#menu zzjs net .two{padding-left:20px;display:none;} 

</style> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 22-16 所 示 。 从 中 可 以 看 到 比 原来 的 页 面 样式 
漂亮 很 多 。 
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图 22-16 最 终 效果 


22.4 鼠标 特效 


在 众多 网 站 中 ， 特 别 是 游戏 网 站 或 小 型 商业 网 站 ， 都 喜欢 使 用 鼠标 特效 。 例 如 将 鼠标 与 
图 片 或 文字 相 结合 ， 达 到 图 片 或 文字 跟随 鼠标 移动 而 移动 的 效果 。 使 用 这 些 特 效 ， 一 方面 可 


JavaScript 动 态 网 站 开发 
案例 课 党 %… 


以 在 鼠标 指针 旁边 加 上 网 站 说 明 的 相关 信息 或 者 欢迎 信息 ; 另 一 方面 也 可 以 吸引 人 的 注意 
力 ， 使 其 更 加 关注 此 类 网 站 。 


22.4.1 案例 一 一 设置 图 片 跟踪 鼠标 


本 实例 实现 图 片 跟随 鼠标 走动 的 特效 ， 需 要 通过 JavaScript 获取 鼠标 指针 的 位 置 ， 并 且 动 
态 地 调整 图 片 的 位 置 。 图 片 需要 通过 position 的 绝对 定位 ， 很 容易 得 到 调整 。 采 用 CSS 的 绝 
对 定位 是 JavaScript 调整 页 面 元 素 常 用 的 方法 。 具 体 步骤 如 下 。 

创建 基本 HTML 页 面 。 


<!DOCTYPE html> 

<html > 

<head> 
<title> 随 鼠标 移动 的 图 片 </title> 
</head> 

<body> 

</body> 

</html> 


上 述 代码 比较 简单 ， 只 是 实现 了 一 个 HIML 页 面 结构 。 这 里 就 不 再 演示 了 。 
添加 JavaScript 代码 ， 实 现 图 片 随 鼠 标 移 动 。 


<script type="text/javascript"> 
function badaD(html){ 
var ad=document .body.appendChild(document .createElement ('div')); 
ad.style.cssText="border:1lpx solid 
#000;background:#FFF;position:absolute; 
padding:4px 4px 4px 4px;font: 
12px/1.5 verdana;"; 
ad.innerHTML=html||'This is bad ideal!'7 
Var c=ad.appendchild(document .createElement ('span')); 
c.innerHTML="x"; 
c.style.cssText="position:absolute;right:4px;top:2px;cursor:pointer"; 
c.onclick=function (){ 
document .onmousemove=null; 
this.parentNode.style.left="'-99999px' 
}; 
document .onmousemove=function (e){ 
e=e| |window.event; 
Var x=e.clientXx,y=e.clientYy; 
setTimeout (function() { 
if(ad.hover) return; 
ad.style.left=x+5+'px'"; 
ad.style.top=y+5+'px"; 
},120) 


ad.onmouseover=function (){ 
this.hover=true 


ad.onmouseout=function (){ 
this.hover=false 


3 
badaD ('<img src="18.png">') 
</script> 


在 上 述 代 码 中 ， 使 用 appendChild0 方 法 为 当前 页 面 创建 了 一 个 DIV 对 象 ， 并 为 DIV 层 设 
置 了 相应 样式 。 之 后 的 eclientX 和 e.clientY 语句 确定 鼠标 位 置 ， 并 动态 调整 图 片 位 置 ， 从 而 
实现 图 片 移动 的 效果 。 上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 22-17 所 示 。 从 中 可 以 看 
到 鼠标 在 页 面 移动 时 ， 图 片 也 跟着 移动 。 


图 22-17 最 终 效 果 N 
22.4.2 ”案例 一 一 设置 文字 跟踪 鼠标 


本 实例 实现 文字 跟随 鼠标 走动 的 特效 ， 需 要 通过 JavaScript 获取 鼠标 指针 的 位 置 ， 并 且 动 
态 地 调整 文字 的 位 置 。 文 字 需 要 通过 字符 串 数组 进行 定位 。 有 具体 步骤 如 下 。 
EC 创建 基本 HTML 页面。 代码 如 下 : 


<!DOCTYPE html> 

<html > 

<head> 
<tit1le> 鼠 标的 文字 跟踪 </title> 
</head> 

<body> 

</body> 

</html> 


上 述 代码 比较 简单 ， 只 是 实现 了 一 个 HTML 页 面 结构 ， 如 图 22-18 所 示 。 


A 


22-18 ”HTML 页 面 结构 


添加 JavaScript 代码 ， 实 现 鼠 标的 文字 跟踪 效果 。 


<body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow- 
y:scroll"> 


‘3@ 


JavaScript 动 态 网 站 开发 
案例 课堂 > 


<script language="Javascript"> 
Var xX,y 

Var step=20 

var flag=0 

Var message 感谢 登录 本 站 ! " 
message=message.split("") 

Var xpos=new Rrray() 

var ypos=new Rrray() 

function handlerMM(e){ 

X = (document.layers) ? e.pagex 
Y = (document.layers) ? e-pageY 
flag=1} 

function makesnake() { 

if (flag==1 && document.all) { 
for (i=message.length-1; i>=1; i--) { 
xpos[i]=xpos[i-l1]+step 

ypos [i]=ypos[i-1] 

} 

) xpos[0]=x+step 


document .body.scrollLeft+event.clientx 
document .body.scrollToptevent .clientYy 


ypos[0]=y 
for (i=0; i<message.length-1; i++) { 
ww Var thisspan = eval("span"+(i)+".style") 


thisspan.posLeft=xpos [i] 
thisspan.posTop=ypos [i] 

} 

N| i 

Var timer=setTimeout ("makesnake ()",30) 


} 


for (i=0;i<=message.length-1;i++) { 

document .write("<span id='span"+i+"' class='spanstyle'>") 
document .write (message[i]) 

document .write("</span>") 


} 


document .onmousemove = handlerMM; 
</script> 


上 述 代码 在 下 9.0 浏览 器 中 的 显示 效果 如 图 22-19 所 示 。 从 中 可 以 看 到 鼠标 在 页 面 移动 
时 文字 跟着 鼠标 移动 。 
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22-19 添加 JavaScript 代码 


添加 CSS 代码 ， 修 饰 文字 。 


<STYLE> 

-spanstyle { 
position:absolute; 
visibility:visible; 
top:-50px; 
font-size:10pt; 
font-family:Verdana; 
font-weight:bold; 
color:#FF8080 

3 

</STYLE> 


上 述 代码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 22-20 所 示 。 从 中 可 以 看 到 鼠标 在 页 面 中 移 
动 时 文字 跟着 鼠标 移动 ， 但 是 文字 的 大 小 和 颜色 都 发 生 了 变化 。 
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图 22-20 添加 CSS 修饰 文字 
22.5 时 间 特 效 


在 网 页 中 添加 时 间 特 效 ， 可 以 方便 用 户 查询 时 间 和 日 历 ， 使 用 JavaScript 可 以 制作 多 种 时 
间 特 效 。 本 节 以 制作 时 钟 和 简单 日 历 表 为 例 ， 介 绍 网 页 时 间 特 效 的 制作 方法 。 


22.5.1 案例 一 一 设置 时 钟 特效 


在 HTML 5 技术 中 ， 新 增 了 一 个 容器 画布 canvas， 用 来 在 页 面 上 绘制 一 些 图 形 。 利 用 这 
个 新 的 特性 ， 并 结合 JavaScript 的 相关 代码 ， 可 以 在 网 页 上 创建 一 个 类 似 于 钟表 的 特效 。 

本 实例 是 在 画布 上 绘制 时 钟 ， 需 要 绘制 几 个 必要 的 图 形 ， 如 表盘 、 时 针 、 分 针 、 秒 针 和 
中 心 圆 这 几 个 图 形 。 这 样 将 上 面 几 个 图 形 组 合 起 来 ， 就 构成 一 个 时 钟 界 面 ， 然 后 使 用 
JavaScript 代码 ， 根 据 时 间 确 定 秒针 、 分 针 和 时 针 位 置 。 具 体 步骤 如 下 。 

EEIDp 创建 HIML 页 面 。 | 


<!DOCTYPE html> 
<html> 
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<head> 

<title>canvas 时 钟 </title> 

</head> 

<body> 

<canvas id="canvas" width="200" height="200" style="border:lpx solid 
#000; "> 您 的 浏览 器 不 支持 canvas。</canvas> 

</body> 

</html> 


上 述 代码 创建 了 一 个 画布 ， 其 宽度 为 200 像素 ， 高 度 为 200 像素 ， 带 有 边框 ， 颜 色 为 黑 
色 ， 样 式 为 直线 型 。 在 正 9.0 浏览 器 中 上 述 代 码 的 显示 效果 如 图 22-21 所 示 。 从 中 可 以 看 到 
显示 了 一 个 带 有 黑色 边框 的 画布 ， 画 布 中 没有 任何 信息 。 
[sers dminisrator\Desktop astm htm o-oo 


[ES 


文件 (F)” 编 句 (E) 。 坦 看 (V) ”收藏 大 (A) ”工具 [帮助 (H) 


N 瑟 100% ~ 


图 22-21 定义 画布 
EDp 添加 JavaScript， 绘 制 不 同 图 形 。 


<script type="text/javascript" language="javascript" charset="utf-8"> 
var canvas = document .getElementById('canvas'); 
Var ctx = canvas.getContext ('2d'); 
if(ctx){ 
Var timerId; 
Var frameRate = 60; 
function canvobject(){ 


this.x = 0; 

this.y = 0; 

this.rotation = 0; 
this.borderWidth = 2; 
this.borderColor = "#000000"'; 


this.fill = false; 

this.fillColor = "'#ff0000"'; 

this.update = function(){ 

if(!this.ctx)throw new Error(' 你 没有 指定 ctx 对 象 。'); 
Var ctx = this.ctx 

ctx.save(); 

ctx.lineWidth = this.borderWidth; 

ctx.strokestyle = this.borderColor; 

ctx.fillstyle = this.fillColor; 

ctx.translate (this.x, this.y); 
if(this.rotation)ctx.rotate (this.rotation * Math.PI/180); 
if(this.draw)this.draw (ctx); 
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Ctx.stroke(): 
ctx.restore(); 
} 
}; 
function Line(){}; 
Line.prototype = new 


canvobject (); 


Line.prototype.fill = false; 


Line.prototype.start 
Line.prototype.end = 


= [0,0]; 
[5,5]; 


Line.prototype.draw = function(ctx){ 
Ctx .beginPath() 7 

ctx.moveTo.apply (ctx,this.start); 
ctx.lineTo.apply (ctx,this.end); 
ctx.closePath(); 

}; 


function Circle(){}; 

Circle.prototype = new canvOobject () 7 
Circle.prototype.draw = function(ctx){ 
ctx.beginPath (); 

ctrearc(l0n Or thiseradiuss Ox 2. MaEN Pls 
ctx.closePath(); 

}; 


Var circle = new Circle(); 
circle.ctx = ctx; 

circle.x = 1007 

circle.y = 100; 

circle.radius = 90; 
circle.fill = true; 
circle.borderWidth = 6; 
circle.fillColor = "#ffffff"; 


Var hour = new Line(); 
hour.ctx = ctx; 
hour.x = 100; 
hour.y = 100; 
hour.borderColor 
hour.borderWidth = 10; 
hour.rotation = 0; 
hour.start = [0,20]; 
hour.end = [0,-50]; 


var minute = new Line(); 
minute.ctx = ctx; 

minute.x = 100; 

minute.y = 100; 
minute.borderColor = "#333333"; 
minute.borderWidth 727 
minute.rotation = 07 
minute.start = [0,20]; 
minute.end = [0,-70]; 


true); 


uy 
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Var seconds = new Line() 7 
seconds.ctx = ctx; 

seconds.x = 100; 

seconds.y = 100; 
seconds.borderColor = "#ff0000"; 
seconds .borderWidth 4; 
seconds.rotation = 07 
seconds.start = [0,20]; 
seconds.end = [0,-80]; 


Var center = new Circle(); 
Center.ctx = ctx; 

center.x = 100; 

center.y = 100; 

center.radius = 5; 

center.fill = true; 
center.borderColor = ‘orange'; 


for (var i=0,1s=[],cache;i<12;i++){ 
cache = ls[i] = new Line() 7 
cache.ctx = ctx; 

cache.x = 1007 

cache.y = 100; 
cache.borderColor = "orange"; 
cache.borderWidth = 2; 
cache.rotation = i * 30; 
cache.start = [0,-70]; 
cache.end = [0,-80]; 

} 


timerId = setInterval (function(){ 
// 清除 画布 
ctx.clearRect (0,0,200,200); 
// 填充 背景 色 
ctx.fillSstyle = 'orange'; 
ctx.fillRect (0,0,200,200); 
// 表盘 
circle.update () 7 
// 刻度 
for (var i=0;cache=ls [i++];)cache.update(); 
// 时 针 
hour .rotation = (new Date()) .getHours() * 30; 
hour -update () > 
// 分 针 
minute -rotation = (new Date()) .getMinutes () * 67 
minute.update () 7 
// 秒针 
seconds.rotation = (new Date()) .getSeconds() * 6; 
seconds .update (); 
// 中 心 加 
center -update () > 
}， (1000/frameRate) 10) 7 
}elsef{ 
alert (' 您 的 浏览 器 不 支持 canvas 无 法 预览 . \n 跟 我 一 起 说 : "很 遗憾 !1"' ) ; 
} 
</script> 


上 述 代码 由 于 篇 幅 比较 长 ， 只 显示 了 部 分 ， 其 详细 代码 可 以 在 光盘 中 查询 。 上 述 代码 首 
先 绘制 不 同类 型 的 图 形 ， 例 如 时 针 、 秒 针 和 分 针 等 。 然 后 再 将 其 组 合 在 一 起 ， 并 根据 时 间 定 
义 时 针 等 指向 。 在 下 浏览 器 中 上 述 代 码 的 显示 效果 如 图 22-22 所 示 。 从 中 可 以 看 到 页 面 中 出 
现 了 一 个 时 钟 ， 其 秒针 在 不 停 地 移动 。 
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图 22-22 最 终 特效 


22.5.2 ”案例 一 一 制作 日 历 表 


日 历 是 网 页 当中 常 添加 的 模块 ， 本 实例 将 使 用 JavaScript 的 相关 内 容 创建 一 个 简单 的 日 历 
表 。 日历 分 为 年 、 月 、 日 并 添加 有 星期 数 。 本 实例 使 用 数组 定义 月 数 和 天 数 ， 然 后 使 用 
JavaScript 的 日 期 对 象 获取 系统 当中 的 时 间 。 

有 具体 实现 步骤 如 下 。 

ECXDp 创建 HIML 页 面 。 


<!DOCTYPE html> 
<html> 

<head> 
<title> 简 单 日 历 </title> 
</head> 

<body> 

</body> 

</html> 


运行 上 述 代 码 ， 效 果 如 图 22-23 所 示 ， 实 现 了 一 个 HTML 页 面 结构 。 


22-23 ”页 面 结构 效果 
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添加 JavaScript 代码 ， 实 现 简单 日 历 效果 。 


<script language="Javascript"> 

monthnames = new Arrayl( 

A 

pA 

03 月 

"4 月"， 

Be 

"6 月 ", 

"7 月 "， 

5 月 5 

”10 月" 

"11 月 "， 

"12 月 ") ; <!-- 声 明 数 组 变量 ， 存 储 月 份 表 --> 

Var linkcount=0; 

function addlink (month, day, href) { 

Var entry = new Array (3) ;<!-- 声 明 一 个 数组 变量 --> 

entry[0] = month; 

entry[1] day; 

entry[2] href; 

this[linkcount++] = entry;<!-- 返 回 链接 对 象 --> 

了 

Array.prototype.addlink = addlink; 

linkdays = new Array(); 

monthdays = new Array (12) ;<!-- 声 明 变量 , 存储 每 个 月 的 天 数 --> 
monthdays [0]=317 
monthdays [1]=287 
monthdays [2]=317 
monthdays [3]=307 
monthdays [4]=317 
monthdays [5]=30; 
monthdays [6]=317 
monthdays [7]=317 
monthdays [8]=307 
monthdays [9]=317 
monthdays [10]=30; 
monthdays [11]=317 
todayDate=new Date(); 
thisday=todayDate .getDay () 7 !-- 获 得 当前 日 --> 
thismonth=todayDate.getMonth();<! 一 -获得 当前 月 份 
thisdate=todayDate.getDate(); <!-- 获 得 当前 日 期 
thisyear=todayDate.getYear(); <!-- 获 得 当前 年 份 --> 

thisyear = thisyear % 100; 

thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear)); 
<!-- 年 份 转换 成 标准 格式 --> 

if (((thisyear % 4 == 0) <!-- 判 断 今年 是 否 为 头 年 --> 

&& !(thisyear % 100 == 0))<!-- 如 果 不 是 半年 ，monthdays 中 的 第 二 项 十 1--> 
11(thisyear % 400 == 0)) monthqays [1]++7 

startspaces=thisdate; 

while (startspaces > 7) startspaces-=7; ”<!-- 求 出 当前 日 期 对 应 的 星期 几 --> 
startspaces = thisday - Startspaces + 1; 

if (startspaces < 0) startspaces+=7; <!-- 计 算 本 月 1 号 对 应 星期 几 --> 
document .write ("<table border=2 bgcolor=white ") ;<!-- 开 始 画 表格 的 第 一 行 --> 


于 


document .write ("bordercolor=black><font color=black>"); 
document .write("<tr><td colspan=7><center>" 

+ thisyear 

+" 年 "+monthnames [thismonth]+"</center></font></td></tr>"); 
<!-- 显 示 当 前 年 份 和 月 份 --> 

document .write ("<tr>") ;<!-- 画 表格 的 第 二 行 --> 

document .write ("<td align=center> 日 </td>") ; 

document .write("<td align=center> 一 </td>") 7 

document .write("<td align=center> 二 </td>") 7 

document .write("<td align=center> 三 </td>") 7 

document .write("<td align=center> 四 </td>") 7 

document .write("<td align=center> 五 </td>") 7 

document .write ("<td align=center> 六 </td>") 7 

document .write("</tr>"); 

document .write("<tr>"); 

for (s=0;s<startspaces;s++) { 

document .write("<td>gnbsp</td>");<!-- 本 月 1 号 以 前 的 几 列 空白 --> 
} 

count=1; 

while (count <= monthdays[thismonth]) {<!-- 依 次 将 本 月 的 每 一 天 填 入 到 表格 中 --> 
for (b = startspaces;b<7;b++) { 

linktrue=false; 

document .write("<td>"); <!-- 写 入 表格 符 --> 

for (c=0;c<linkdays.length;c++) { 

if (linkdays[c] != null) { <!-- 填 入 相应 的 链接 --> 

if ((linkdays[c] [0]==thismonth + 1) && (linkdays[c] [1]==count)) { 
document .write("<a href=\"" + linkdays[c] [2] + "\">"); 
linktrue=true; 

} 

3» 

if (count==thisdate) { 

document .write("<font color='FF0000'><strong>"); 

<!-- 如 果 是 当前 日 期 ， 则 用 特殊 的 颜色 来 显示 --> 

if (count <= monthdays [thismonth]) {<!-- 如 果 没 有 超出 本 月 的 范围 --> 
document .write (count);<!-- 显 示 日 期 --> 

3 

elae 4 

document .write ("gnbsp");<! -= 否则， 显示 空格 --> 

} 

if (count==thisdate) { 

document .write ("</strong></font>") ;<!-- 如 果 是 当前 日 期 ， 则 用 特殊 的 字体 来 显示 --> 
} 

if (linktrue) 

document .write ("</a>"); 

document .write("</td>"); 

count++; 

document .write("</tr>"); 

document .write("<tr>"); 

startspaces=0; 

4 

document .write("</table></p>"); 

</script> 


运行 上 述 代 码 ， 在 正 9.0 浏览 器 中 查看 添加 的 日 历 效果 ， 如 图 22-24 所 示 。 
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SS 22.6 页 面 特 效 

N\ 
Ne 在 制作 网 页 时 ， 有 些 页 面 特效 可 以 使 用 JavaScript 来 完成 。 使 用 JavaScript 能 够 制作 的 网 


页 特效 有 很 多 种 。 下 面 介绍 两 种 使 用 JavaScript 制作 的 网 页 特效 实例 。 


22.6.1 案例 一 一 设置 颜色 选择 器 


区 在 页 面 中 定义 背景 色 和 字体 颜色 是 一 种 比较 常见 的 操作 。 

本 实例 将 创建 一 个 可 以 自由 获取 颜色 值 的 颜色 选择 器 。 其 实现 原理 非常 简单 ， 即 将 几 个 
常用 的 颜色 值 进行 组 合 ， 合 并 后 ， 就 是 所 要 选择 的 颜色 值 。 这 些 都 是 利用 JavaSeript 代码 完成 
的 。 具 体 实现 步骤 如 下 。 

GET 创建 基本 HTML 页 面 。 


<!DOCTYPE html> 

<html> 
<head><title> 背 景色 选择 器 </title> 
</head> 

<body bgcolor="#FFFFFF"> 
</body> 

</html 


上 述 代码 比较 简单 ， 只 是 实现 了 一 个 页 面 框架 ， 如 图 22-25 所 示 。 


22-25 ”页 面 框架 效果 
添加 JavaScript 代码 ， 实 现 颜色 选择 。 


令 492 


证 


<script language="Javascript"> 


A 

Var hex = new Array(6) 

hex[0] = "FEF™" 

ex Ge 
bext2 = "99™ 

hex[3] bh 7 

hex[4] bE 

hex[5] = "00" 


function display (triplet) 
上 
document .bgColor = '#' + triplet 
alert (' 现 在 的 背景 色 是 #'+triplet) 
function drawCell (red, green, blue) 
. 
document .write('<TD BGCOLOR="#' + red + green + blue + '">') 
document .write('<A HREF="javascript:display(\'' + (red + green + blue) + 
I ) ">') 
document .write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12 WIDTH=12>') 
document .write('</A>') 
document .write('</TD>') 
function drawRow (red, blue) 
document .write('<TR>') 
fo0rF (var i = 0 1 < 6 ++1) 
{ 
drawCell (red, hex[i], blue) 
} document.write('</TR>') 
}function drawTable (blue) 
{ 
document .write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>') 
for (var i = 0; i < 6; ++i) 
{ 
drawRow (hex [i], blue) 
} 
document .write('</TABLE>') 
} 
function drawCube() 
{ 
document .write('<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>') 
Tor var d= DA 
{ 
document .write('<TD BGCOLOR="#FFFFFF">') 
drawTable (hex[i]) 
document .write('</TD>') 
} document.write('</TR></TABLE>') 
}drawCube () 
// --></script> 


在 上 述 代码 中 ， 创 建 了 一 个 数组 对 象 hex 用 来 存放 不 同 的 颜色 值 。 之 后 的 几 个 函数 分 别 
将 数组 中 的 颜色 组 合 在 一 起 ， 并 在 页 面 中 显示 ，display 函数 完成 定义 背景 颜色 和 显示 颜 
色 值 。 

上 述 代 码 在 正 9.0 浏览 器 中 的 显示 效果 如 图 22-26 所 示 。 从 中 可 以 看 到 页 面 显示 多 个 表格 ， 
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每 个 单元 格 代 表 一 种 颜色 。 


再 生 #0090CC 


上 


图 22-26 最 终 效 果 
22.6.2 ”案例 一 一 设置 网 页 自动 滚屏 


网 页 的 自动 滚屏 是 页 面 特 效 当 中 常见 的 一 种 特效 ， 本 实例 将 使 用 JavaScript 与 CSS 相 结 
合 的 方式 制作 网 页 自动 滚屏 效果 。 

具体 实现 步骤 如 下 。 

创建 基本 HTML 页 面 。 


<html> 
<head> 
<title> 自 动 滚屏 </title> 
</head> 
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" 
marginheight="0"> 
<div id=layer2 
style="z-index: 2; left: 317px; width: 137px; position: absolute; top: 
8px; height: 24px"><input onclick=scrollit() type=button value= 向 下 滚屏 
name=button> 


</div> 
<table width="282" border="0" align="center" cellpadding="0" 
cellspacing="0"> 
<!-- fwtable fwsrc=" 未 命名 " fwbase="1ist 01.jpg" fwstyle="dreamweaver" 
fwdocid = "742308039" fwnested="0" --> 


<tr> 

<td><img src="spacer.gif" width="25" height="1" border="0" alt=""></td> 
<td><img src="spacer.gif" width="58" height="1" border="0" alt=""></td> 
<td><img src="spacer.gif" width="86" height="1" border="0" alt=""></td> 
<td><img src="spacer.gif" width="56" height="1" border="0" 
<td><img src="spacer.gif" width="15" height="1" border="0" 
<td><img src="spacer.gif" width="42" height="1" border="0" alt=""></td> 
<td><img src="spacer.gif" width="1"” height="1" border="0" alt=""></td> 
</tr> 


< 
<td colspan="2"><img name="]list 01 ri cli" src="list 01 rl cl1.jpg" 
width="83" height="102" border="0" alt=""></td> 


<td colspan="2" background="1list 01 rl c3.jpg"><img 
src="list 01 rl c3.jpg" width="548" height="102"></td> 
<td colspan="2"><img name="list 01 rl c5" src="list 01 rl c¢5.jpg" 
width="57" height="102" border="0" alt=""></td> 
<td><img src="spacer.gif" width="1"” height="102" border="0" alt=""></td> 
</tr> 
<tr> 
<td background="list 01 r2 cl.jpg">&gnbsp;</td> 
<td colspan="4" valign="top"> 
<div align="center"> 
<table width="100%" border: 
本 
<td bgcolor="#ffe495"> 
<div align="center"><b> 自 动 滚屏 </b> </div></td> 
</tr> 
> 
<td bgcolor="#ffffdd"> 
<div align="center"><strong> 演 示 效 果 </strong></div></td> 
> 
<tr> 
<td><div align="center"> 点 一 下 向 下 滚屏 按钮 ， 屏幕 会 自动 向 下 滚动 ， 到 页 面 底 
端 ， 再 按 一 下 向 上 滚屏 ， 就 又 上 来 了 </div></td> 
人 
ET 
<td bgcolor="#ffffdd"> 
</tr> 
</table> 
</div></td> 
<td background="list 01 r2 c6.jpg">&nbsp;</td> 
<td><img src="spacer.gif" width="1" height="450" border="0" alt=""></td> 
EX 
<tr> 
<td background="list 01 r3 c2.jpg"> 
<div align="left"><img name="list 01 r3 cil" src="list 01 r3 cl.jpg" 
width="25" height="166" border="0" alt ></div></td> 
<td colspan="2" background="list 01 r3 c2.jpg">&nbsp;</td> 
<td colspan="3" background="list 01 r3 c2.jpg"> 
<div align="right"><img name="]list 01 r3 c4" src="list 01 r3 c4.jpg" 
width="113"” height="166" borde 0” a ></div></td> 
<td><img src="spacer.gif" width="1"” height="166" border="0" alt=""></td> 
<AEr> 
</table> <div id=layerl 
style="z-index: 1; left: 335px; width: l100px; position: absolute; top: 
671lpx; height: 20px"><input onclick=scrollitl() type=button value= 向 
上 滚屏 name=button2> 
</div> 
</body> 
</html> 


运行 上 述 代码 ， 将 显示 如 图 22-27 所 示 的 静态 页 面 。 当 单 击 【向 下 滚屏 】 按 钮 后 ， 页 面 
并 不 滚动 。 


0"” cellpadding="5" cellspacing="5"> 


U 
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图 22-27 ”创建 静态 网 页 架构 效果 
TY 添加 Css 代码， 修饰 网 页 中 的 文字 效果 。 


<style type=text/css>R { 

color: white; font-style: normal; text-decoration: none} 
a:hover {background: red; color: yellow; font-style: normal; 
decoration: none} 

.white {color: #ffffff} 

table {font-size: 9pt} 

</style> 


运行 上 述 代码 ， 可 以 看 到 网 页 中 文字 发 生 了 变化 ， 如 图 22-28 所 示 。 


BEAR 
i 
点 一 下 舱 民 殿 昌 ， 岂 划 会 自 洒 引 下 流动 ，2 玫 民 浜 ， 册 控 一 下 上 潍 , 独 只 上 未 了 


22-28 添加 CSS 代码 效果 


添加 JavaScript 代码 ， 实 现 动态 滚屏 效果 。 


<script language=JavaScript> 
function scrollit() { 
for (I=l; I<=750; I++){ 
parent.scroll (1,1) 

} 
. 
function scrollitl() { 
for (I=750; I>1; I=I-1)1{ 
parent .scroll (1,1) 


text= 


ee 
运行 上 述 代码 ， 单 击 【向 下 滚屏 】 按 钮 ， 网 页 自动 向 下 滚动 至 底部 ， 如 图 22-29 所 示 。 
再 单 击 【向 上 滚屏 】 按 钮 ， 网 页 将 自动 向 上 滚动 至 项 部， 如 图 22-30 所 示 。 


图 22-29 ”滚动 至 底部 图 22-30 ”滚动 至 顶部 


22.7” 跟 我 练 练 手 


1. 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
2. 上 机 练习 


练习 1: 制作 文字 上 下 弹跳 特效 。 

练习 2: 制作 文本 闪烁 效果 。 

练习 3: 在 网 页 中 实现 图 片 浮动 效果 。 

练习 4: 在 网 页 中 实现 向 下 滚动 的 菜单 特效 。 
练习 5: 在 网 页 中 实现 鼠标 光标 三 色光 跟随 效果 。 
练习 6: 在 网 页 中 添加 带 倒影 的 时 钟 。 

练习 7: 在 页 面 中 添加 飘 雪 效 果 。 


22.8 高 手 甜 点 


甜点 1: 如 何 实现 禁止 鼠标 右键 的 特效 ? 
通过 禁止 鼠标 右键 操作 ， 可 以 防止 网 页 内 容 被 复制 ， 该 特效 的 代码 如 下 : 


<SCRIPT language=javascript> 
faunction click(). { 
if (event.button==2) { 


alert (' 对 不 起 ， 本 页 的 内 容 不 经 允许 不 得 拷 备 。' ) 
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} 
document .onmousedown=click 
</SCRIPT> 


运行 上 述 代 码 最 终 弹出 的 效果 如 图 22-31 所 示 。 


图 22-31 禁止 鼠标 右键 的 特效 
甜点 2: 如 何 实现 图 片 的 淡出 和 淡 隐 特效 ? 
通过 控制 图 片 的 属性 ， 可 以 实现 图 片 的 淡出 和 淡 隐 特效 ， 具 体 代码 如 下 : 


<IMG style="FILTER: alpha (opacity=0)" alt=Image src="123.gif" border=0 


name=u> 
<SCRIPT language=JavaScript>var p = 1; 
Ne Var c = true;function fade()1{ 
if(document .all); 
if(c == true) { 
D4 


} 
if(b==100) { 

[9 

c= false 
if(b==10) { 

bi#y 

c= EU 
} 
if(c == false) { 

== 
u.filters.alpha.opacity=0 + b; 
setTimeout ("fade ()",50); 
. 
</SCRIPT> 


其 中 123.gif 为 添加 淡出 和 淡 隐 特 效 的 图 片 。 


